HTML 布局

頁布局對改善網站的外觀非常重要。

請慎重設計您的網頁布局。

在線實例

使用 <div> 元素的網頁布局

如何使用 <div> 元素添加布局。

使用 <table> 元素的網頁布局

如何使用 <table> 元素添加布局。

網站布局

大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。

大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創建多列布局：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

上面的 HTML 代碼會產生如下結果：

HTML 布局 - 使用表格

使用 HTML <table> 標簽是創建布局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

上面的 HTML 代碼會產生以下結果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。

HTML 布局標簽

標簽	描述
<div>	定義文檔區塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內元素。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

家好，我是Echa。

又到周五啦，提前祝大家周末愉快！今天來分享一些實用的前端工具！

1. Small Dev tools

Small Dev Tools 是一個前端工具網站，包含了很多實用的功能，比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。

官網：https://smalldev.tools/

2. Carbon

Carbon 是一個在線工具，可以生成漂亮的不同風格的代碼圖片。

官網：https://carbon.now.sh/

3. UI Design Daily

UI 設計日報，提供免費優質的 UI 資源。

官網：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即顏色獵人，是一個在線設計配色的網站，其最大的特點就是使用飽和度調配配色方案。每天會根據瀏覽量進行更新排版，并可以直接使用。

官網：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一個在線的配色工具網站，可以根據顏色、類型等查找合適的配色方案。

官網：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用來創建動畫、陰影和使用顏色，幫助我們編寫更好的CSS。

官網：https://keyframes.app/

7. Design Resources

Design Resources 是一個設計資源的集合。

官網：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一個開源項目，包含12個實用的前端工具。

官網：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一個前端動畫合集，可以通過右鍵點擊想要的動畫直接復制對應的 CSS 或 SCSS 代碼。

官網：https://ui-snippets.dev/

10. Pattern CSS

Pattern CSS 可以用漂亮的圖案填充空白背景。

官網：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用來查詢 HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。

官網：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一個用來快速方便的創建 CSS 漸變的網站。

官網：https://cssgradient.io/

13.CSS matic

CSS matic 是一個 CSS 工具，目前包含4個很有用的工具，分別是：支持各種顏色和透明度的漸變工具，使用漸變工具，可以創建漸變平滑的色彩變化效果和微妙的透明膠片；邊框圓角工具可以幫助你方便的實現需要的圓角效果；噪聲紋理可以幫助你創造奇妙的背景圖案，能夠實時預覽結果；盒陰影工具可以控制模糊半徑的變化，顏色變化，陰影大小，可以實現你想要的任何效果。

官網：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用來測試響應式網頁。輸入鏈接即可生成預覽，Am I Responsive 能幫我們測試出頁面在手機、平板電腦、筆記本電腦和桌面端設備上的瀏覽體驗。

官網：http://ami.responsivedesign.is/

15. CSS Generator

這是一個實用的 CSS 生成器，可以實時查看調試效果。

官網：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一個CSS 調色板生成器，用來創建一致的調色板方案。

官網：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路徑生成器

CSS cli-path 功能能夠構建復雜的形狀，該工具讓我們可以輕松地以交互方式構建該多邊形。

官網：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一個 Grid 布局生成器，通過這個工具可以快速創建自定義CSS Grid布局。

官網：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以為布局組件創建 CSS 和 HTML 的工具。

官網：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即響應式字體計算器，可以輕松創建流暢的排版體驗。它有更廣泛的支持，可以用幾行 CSS 來實現。

官網：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是學習、測試正則表達式的工具網站。

官網：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一個正則表達式可視化器和編輯器。

官網：https://regex-vis.com/

23. Loupe

Loupe 是一個可視化工具，可幫助我們了解 JavaScript 的調用堆棧/事件循環/回調隊列是如何執行的。

官網：http://latentflip.com/loupe/

24. RunJS

RunJS 是一個桌面應用程序，可幫助我們編寫專門的 Javascript 和 Typescript 代碼。它的一些優勢是可以快速測試代碼，輕松導入和測試庫代碼，并且能夠修改界面、主題和字體以適應偏好。

官網：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通過拖放從計算機上傳圖像，可以輕松地編輯網頁的 SVG 圖像。

官網：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以幫助我們通過輸入 SVG 路徑數據來快速直觀地查看 SVG 圖像。此外，該工具還提供了詳細的說明，以便了解如何創建基本的 SVG 形狀，如直線、曲線、三角形等。

官網：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一個在線工具，可以輕松快速地為網站創建 SVG 背景。只需編輯必要的信息，它將自動導出圖像或代碼供我們應用到網站。

官網：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以將代碼分步設置為動畫、視頻或 GIF。

官網：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用來創建 SVG 波形背景。

官網：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一個為 Web 應用程序開發而構建的在線編輯器，支持多種主流框架。

官網：https://codesandbox.io/

31. Openbase

Openbase 幫助開發人員在數以百萬計的開源軟件包中進行選擇和使用。

官網：https://openbase.com/

32. CodePen

CodePen 是一個在線的前端代碼編輯工具，可用于制作測試頁面、代碼調試，所見即所得。

官網：https://codepen.io/

33. JSONLint

JSONLint 是一個 JSON 調試工具，如果遺漏了語法中的某些內容，它會進行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具，而且很容易上手。

官網：https://jsonlint.com/

34. Minify

Minifier 可以對 JavaScript 和 CSS 代碼進行壓縮，通過縮小可以提高網站加載速度。Minifier 通過刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。

官網：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。

官網：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一個高級 CSS 漸變編輯器，使用帶有分層、設計工具和免費云存儲的功能豐富的編輯器設計插圖、圖案、圖標等。

官網：https://gra.dient.art/

37. 3DPop

3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

官網：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一個CSS圖片濾鏡工具，提供了 36 個 CSS 過濾器供我們使用。

官網：https://baseline.is/tools/css-photo-filters/

言

上篇文章分享了一款史上最沒用的中文版的CSS漸變色庫，今天再來分享一篇它的兄弟庫chinese-layout。

chinese-layout是一款利用CSS自定義屬性來制作的中文布局CSS庫，由于grid布局十分強大，強大到甚至只需要兩行CSS代碼就可以完成一個基本的布局。不過grid屬性較多較為復雜，并且不支持IE瀏覽器等特點導致了許多人并不很了解它。

不過近些年來隨著IE瀏覽器的逐步退出市場，兼容性已經不再是特別需要糾結的一件事情了：

可以看到各大瀏覽器的支持情況已經較為樂觀了，為了讓大家快速體驗grid布局的強大之處，chinese-layout就此誕生！

該庫的尺寸十分輕量級，只有不到1KB的大小(653字節)，并且使用起來也是十分的方便。

使用方式

假設現在有一個ul元素，我們想要它變為一個九宮格的布局，首先需要在ul元素上寫：

ul {
    /* 這個是固定寫法，必須先指定display為grid */
    display: grid;
  
  /* grid屬性需要指定哪種布局 */
  grid: var(--九宮格);
  
  /* 加入一點間距，讓九個元素相互之間有一定的距離 */
  gap: 10px;
}

然后在父元素里面添加九個元素：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

這就完事啦：

當然這里其實是省略了一些父元素上的寬高以及子元素的顏色等細節。

這些細節就交給你們來決定，在此案例中chinese-layout只負責將父元素分割成九等分。

安裝

要記得先引入這個庫才能夠去正常的使用。如果你的項目是一個工程化的項目，那么：

記得要在主文件中引入：

同時也支持sass、less等，如:

如果你只是想在<link>標簽里引入的話，那么：

全部布局

聲明 display: grid;

首先一定要記得聲明 display: grid;

因為chinese-layout底層依賴的就是grid布局。

居中

grid: var(--居中)

DOM結構:

<parent>
  <child/>
</parent>

這種布局需要先在父元素上寫這么兩行代碼:

parent {
  display: grid;
  grid: var(--居中);
}

然后再在子元素上寫上:

child {
  grid-area: 中;
}

但是看起來除了灰蒙蒙一片的背景好像啥也沒有是吧，那是因為我們沒給子元素加上寬高，而且子元素里也沒有任何的內容，導致子元素寬高為0不可見，那么現在我們來給子元素一個寬高再來看看：

child {
  width: 20px;
  height: 20px;
  grid-area: 中;
}

子元素便會在父元素里水平垂直居中:

雙列

grid: var(--雙列)

DOM結構:

parent {
  display: grid;
  grid: var(--雙列);
}

來看看語法:

parent {
  display: grid;
  grid: var(--雙列);
}

可以看到現在兩列緊緊的貼合在一起了，不過有時候這兩列我們并不想它們緊貼在一起，這時我們可以使用 gap 屬性來控制列與列之間的間距：

parent {
  display: grid;
  grid: var(--雙列);
  gap: 10px;
}

運行結果:

可以看到列與列直接距離變成我們設置的10px了，但 gap 屬性只會改變列與列之間的距離，并不會改變與父元素之間的距離，所以之前緊貼著父元素的現在還是緊貼著父元素，如果想與父元素有間距的話可以給父元素加padding:

雙列布局是不需要指定子元素的 grid-area 屬性的，不過你要是非要想指定一下的話也不是不可以:

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 右;
}

運行結果:

(可以通過指定grid-area來顛倒DOM位置，沒事可以去試試)

三列

grid: var(--三列)

咦？這不是雙列嗎？說好的三列呢？

其實是這樣，三列中的最中間一列被做成了自適應了，如果不給寬度并且也沒有任何帶寬度的子元素的話寬度就會為0，所以就看不到最中間那列啦！

那咱們給中間的DOM元素一個寬度吧:

<parent>
  <child1/>
  <child2/>
  <child3/>
</parent>

parent {
    display: grid;
  grid: var(--三列);
}
child2 {
    width: 800px;
}

運行結果:

也可以不給寬度，直接用內容去撐開:

<parent>
  <child1/>
  <child2>child2</child2>
  <child3/>
</parent>

運行結果:

也同樣可以用gap屬性來控制間距:

parent {
    display: grid;
  grid: var(--三列);
  gap: 10px;
}
child2 {
    width: 800px;
}

運行結果:

三列布局是不需要指定子元素的 grid-area 屬性的，不過你要是非要想指定一下的話也不是不可以:

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 中;
}

child2 {
  grid-area: 右;
}

運行結果：

(可以通過指定子元素的 grid-area 屬性來顛倒DOM位置，沒事可以去試試)

呂形

grid: var(--呂形)

可是這看起來也不像呂形啊，呂不是應該上面一個口下面一個口嗎？

其實還是那個原理：上面的盒子如果不給高度的話默認為0。

那咱們給個高度再看看:

<parent>
  <child1/>
  <child2/>
</parent>

parent {
    display: grid;
  grid: var(--呂形);
}
child1 {
    height: 100px;
}
child2 {
    overflow-y: auto;
}

運行結果：

還可以通過 gap 屬性來控制間距:

parent {
    display: grid;
  grid: var(--呂形);
  gap: 10px;
}
child1 {
    height: 100px;
}

運行結果：

也可以通過指定子元素的 grid-area 屬性來顛倒DOM位置:

parent {
    display: grid;
  grid: var(--呂形);
  gap: 10px;
}
child1 {
  grid-area: 下;
  overflow-y: auto;
}
child2 {
  height: 100px;
  grid-area: 上;
}

運行結果:

上下欄

grid: var(--上下欄)

看過前面幾種布局的朋友應該猜到了，是因為上盒子和下盒子沒給高度導致現在只能看見中間那欄，咱們給個高度再來看看:

<parent>
  <child1/>
  <child2/>
  <child3/>
</parent>

parent {
    display: grid;
  grid: var(--上下欄);
}
child1 {
    height: 80px;
}
child2 {
  overflow-y: auto;
}
child3 {
  height: 100px;
}

運行結果：

還可以通過 gap 屬性來控制間距:

parent {
    display: grid;
  grid: var(--上下欄);
  gap: 10px;
}
child1 {
    height: 80px;
}
child2 {
  overflow-y: auto;
}
child3 {
  height: 100px;
}

運行結果：

也可以通過指定子元素的 grid-area 屬性來顛倒DOM位置:

parent {
    display: grid;
  grid: var(--上下欄);
  gap: 10px;
}
child1 {
  grid-area: 中;
  overflow-y: auto;
}
child2 {
  height: 80px;
  grid-area: 上;
}
child3 {
  height: 100px;
  grid-area: 下;
}

運行結果:

四宮格

grid: var(--四宮格)

DOM結構：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
<parent/>

parent {
  display: grid;
  grid: var(--四宮格);
}

如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：

parent {
  display: grid;
  grid: var(--四宮格);
  gap: 10px;
}

運行結果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：

row-gap：行與行之間的間距
column-gap：列與列之間的間距

也可以通過 grid-area 屬性來重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }

運行結果：

六宮格

grid: var(--六宮格)

DOM結構：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
  <child6/>
<parent/>

parent {
  display: grid;
  grid: var(--六宮格);
}

如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：

parent {
  display: grid;
  grid: var(--六宮格);
  gap: 10px;
}

運行結果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：

row-gap：行與行之間的間距
column-gap：列與列之間的間距

也可以通過 grid-area 屬性來重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }

運行結果：

九宮格

grid: var(--九宮格)

DOM結構：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
  <child6/>
  <child7/>
  <child8/>
  <child9/>
<parent/>

parent {
  display: grid;
  grid: var(--九宮格);
}

如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：

parent {
  display: grid;
  grid: var(--九宮格);
  gap: 10px;
}

運行結果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：

row-gap：行與行之間的間距
column-gap：列與列之間的間距

也可以通過 grid-area 屬性來重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 中上; }
child3 { grid-area: 右上; }
child4 { grid-area: 左中; }
child5 { grid-area: 中中; }
child6 { grid-area: 右中; }
child7 { grid-area: 左下; }
child8 { grid-area: 中下; }
child9 { grid-area: 右下; }

運行結果：

鋪滿

grid: var(--鋪滿)

看起來貌似啥也沒有，那是因為顧名思義，鋪滿就是子元素和父元素的大小一樣大嘛，來看看DOM結構：

<parent>
  <child/>
</parent>

parent {
  display: grid;
  gird: var(--鋪滿);
}

圣杯

grid: var(--圣杯)

DOM結構：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
</parent>

圣杯布局的子元素必須指定位置：

parent {
  display: grid;
  grid: var(--圣杯);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }

但是看起來并沒有看到圣杯布局的影子，灰蒙蒙的一片，還是那個原因，把上下左右的寬高控制權都留給用戶，如果子元素里沒有任何內容并且沒有指定寬高的話就不會顯示在屏幕上，我們來給個合適的寬高再看看：

parent {
  display: grid;
  grid: var(--圣杯);
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  width: 100px;
  grid-area: 右;
}
child5 {
  height: 80px;
  grid-area: 下;
}

運行結果：

再給個間距看看效果：

parent {
  display: grid;
  grid: var(--圣杯);
  gap: 10px;
}

運行結果：

不給寬高只靠子元素的內容撐起來也可以，而且可以缺少某一個DOM元素，比如我們不想要"右"了：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
</parent>

parent {
  display: grid;
  grid: var(--圣杯);
  gap: 10px;
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  height: 80px;
  grid-area: 下;
}

運行結果：

雖然看起來"中"的右側受 gap 屬性的影響導致有一定的間距，但我們可以不加 gap，靠 margin 來控制間距：

parent > child {
  margin: 10px;
}

運行結果：

即使不給"中"設置寬高，"中"也會根據父元素的寬高來自動調整自己的寬高大小。

也可以靠 row-gap 和 column-gap 屬性來單獨控制橫、縱間距：

雙飛翼

grid: var(--雙飛翼)

DOM結構：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
</parent>

雙飛翼布局的子元素必須指定位置：

parent {
  display: grid;
  grid: var(--雙飛翼);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }

但是看起來并沒有看到雙飛翼布局的影子，灰蒙蒙的一片，還是那個原因，把上下左右的寬高控制權都留給用戶，如果子元素里沒有任何內容并且沒有指定寬高的話就不會顯示在屏幕上，我們來給個合適的寬高再看看：

parent {
  display: grid;
  grid: var(--雙飛翼);
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  width: 100px;
  grid-area: 右;
}
child5 {
  height: 80px;
  grid-area: 下;
}

運行結果：

再給個間距看看效果：

parent {
  display: grid;
  grid: var(--雙飛翼);
  gap: 10px;
}

運行結果：

不給寬高只靠子元素的內容撐起來也可以，而且可以缺少某一個DOM元素，比如我們不想要"右"了：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
</parent>

parent {
  display: grid;
  grid: var(--雙飛翼);
  gap: 10px;
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  height: 80px;
  grid-area: 下;
}

運行結果：

雖然看起來"中"的右側受 gap 屬性的影響導致有一定的間距，但我們可以不加 gap ，靠 margin 來控制間距：

parent > child {
  margin: 10px;
}

運行結果：

即使不給"中"設置寬高，"中"也會根據父元素的寬高來自動調整自己的寬高大小。

也可以靠 row-gap 和 column-gap 屬性來單獨控制橫、縱間距：

響應式

grid: var(--響應式)

響應式布局會根據父元素的大小以及子元素的數量來自行決定如何排版

DOM結構:

<parent>
  <child1/>
    <child2/>
   ......
    <child-N/>
</parent>

parent {
  display: grid;
  grid: var(--響應式);
}

不過每列的最小寬度默認是100px，如果想改變這一大小的話需要在 :root 選擇器上定義一個 --寬 變量，比如想要寬變成30px：

:root {
  --寬: 30px;
}

如果每個子元素之間的距離太近了的話別忘記用 gap 屬性來控制間距哦：

parent {
  display: grid;
  grid: var(--響應式);
  gap: 10px;
}

總結

整體來說這款插件還是不錯的，使用簡單方便，中文命名雖然符合中國人的習慣，但命名太多比較依賴文檔。

還在為布局頭疼的朋友可以快速入手哦！

在線咨詢

上一篇：HTML實例解析
下一篇：一個例子說明網頁浮動框架的應用和靜態網站使用框架注意事項！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 布局

1. Small Dev tools

2. Carbon

3. UI Design Daily

4. Color Hunt

5. SCHEME COLOR

6. Keyframes

7. Design Resources

8. Omatsuri

9. UI Snippets

10. Pattern CSS

11. Can I use

12. CSS Gradient

13.CSS matic

14.Am I Responsive

15. CSS Generator

16. My Brand New Logo

17. 裁剪路徑生成器

18. CSS Grid Generator

19. CSS Layout Generator

20. Fluid-responsive font-size calculator

21. regex101

22. Regex-Vis

23. Loupe

24. RunJS

25. Wrap SVG Online

26. SVG Path Visualizer

27. BGJar

28. Wavesnippets

29. Generate SVG Waves

30. CodeSandbox

31. Openbase

32. CodePen

33. JSONLint

34. Minify

35. Unminify

36. CRADIENT.ART

37. 3DPop

38. CSS Photo Filters

言

使用方式

安裝

全部布局

聲明 display: grid;

居中

雙列

三列

呂形

上下欄

四宮格

六宮格

九宮格

鋪滿

圣杯

雙飛翼

響應式

總結

您的項目需求