Grid佈局簡介

Grid 佈局是網站設計的基礎，CSS Grid 是建立網格佈局最強大和最簡單的工具。

輕鬆使用 Grid 佈局提升開發效率，對複雜的網頁結構佈局更加靈活。

---

1、概述

Grid 將網頁劃分紅一個個網格，能夠任意組合不一樣的網格，作出各類各樣的佈局。網格是一組相交的水平線和垂直線，它定義了網格的列和行。咱們能夠將網格元素放置在與這些行和列相關的位置上。

咱們比較熟悉的好比說座標軸，座標點；若是你看到上面這樣一個網格首先想到是這不就是被淘汰的表格嗎，表格之因此被淘汰最主要在性能方面，然而咱們不得不認可表格對於整個網頁的佈局來講有必定的便利性。那麼如今的網格佈局就能夠把表格裏面的一些較好的方便的東西抽出來，而後把性能方面較差的地方去掉，因此說網格佈局會成爲未來互聯網企業的一個熱潮是有緣由的。

網格佈局的優點

固定的位置和彈性的軌道的大小

你可使用固定的軌道尺寸建立網格，好比使用像素單位。你也可使用好比百分比或者專門爲此目的建立的新單位 fr來建立有彈性尺寸的網格。

元素位置

你可使用行號、行名或者標定一個網格區域來精肯定位元素。網格同時還使用一種算法來控制未給出明確網格位置的元素。

建立額外的軌道來包含元素

可使用網格佈局定義一個顯式網格，可是根據規範它會處理你加在網格外面的內容，當必要時它會自動增長行和列，它會盡量多的容納全部的列。

對齊控制

網格包含對齊特色，以便咱們能夠控制一旦放置到網格區域中的物體對齊，以及整個網格如何對齊。

控制重疊內容

多個元素能夠放置在網格單元格中，或者區域能夠部分地彼此重疊。而後能夠CSS中的z-index屬性來控制重疊區域顯示的優先級。

Grid vs Flexbox

Grid 佈局與 Flex佈局有必定的類似性，均可以指定容器內部多個項目的位置。可是，它們也存在重大區別。Flex佈局是軸線佈局，只能指定"項目"針對軸線的位置，能夠看做是一維佈局。Grid佈局則是將容器劃分紅"行"和"列"，產生單元格，而後指定"項目所在"的單元格，能夠看做是二維佈局。Grid佈局遠比Flex佈局強大。不是說Grid佈局取代Flex佈局，實際上他倆能夠很好的配合使用。

瀏覽器兼容

2、重要術語

網格容器（Grid Container）

元素應用display:grid;，它是其全部網格項的父元素。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

把 container 元素變成一個 grid(網格)，只要把其 display 設置爲 grid。

CSS代碼：

.container {
    display:grid;
}

網格項（Grid Item）

網格容器的子元素，下面的item元素是網格項。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

網格線（Grid Line）

組成網格項的分界線。

記住:網格線僅僅是咱們在定義網格容器的時候就產生的，跟咱們的網格項沒有直接的關聯。網格線是咱們在定義網格容器的時候伴隨出來的虛擬的概念，也就是說在實際的HTML中是找不到這些線的。

網格軌道（Grid Track）

兩個相鄰的網格線之間爲網格軌道。

網格軌道的特色是必定會頂到容器的邊緣。
網格軌道必然跟網格項沒有關聯。

網格單元（Grid Cell）

兩個相鄰的列網格線和兩個相鄰的行網格線組成的是網格單元。

網格區域（Grid Area）

4個網格線包圍的總空間。

3、容器中的屬性

一、dislpay屬性

display:grid | inline-grid | subgrid;

將元素定義爲grid container，併爲其內容創建新的網格格式化上下文（grid formatting context）。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.container {
    display:grid | inline-grid | subgrid;
}

• grid：生成塊級網格。
• inline-grid：生成行內網格。
• subgrid：若是網格容器自己是網格項（嵌套網格容器），此屬性用來繼承其父網格容器的列、行大小。

注意

當元素設置了網格佈局，column、float、clear、vertical-align屬性無效。
display:subgrid;目前全部瀏覽器都不兼容。

二、grid-template屬性

1）grid-template-columns / grid-template-rows

使用以空格分隔的多個值來定義網格的列和行。

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

注意：此屬性用在容器（container）上面。

• 軌道大小 track-size： 可使用css長度（px、em等）、百分比、或用分數（用 fr 單位）
• 網格線名字 line-name：能夠選擇任何名字

2）grid-template-areas

經過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。

.container {
  grid-template-areas: none|
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "......";
}

• grid-area-name：使用 grid-area 屬性設置的網格區域的名稱
• "."：點號表明一個空網格單元
• none：沒有定義網格區域

例如：

.container {
  grid-template-areas: 
    "head head head head"
    "main main . sidebar"
    "foot foot foot foot";
}

以上例子強調如下幾點：

第一：每一行都必定要用雙引號括起來；

第二：每個值對應一個網格單元，千萬不要上面寫了4個，下面只寫三個，這樣的話就會出問題；

第三：每一個網格單元裏的區域名稱都以空格隔開；

第四：每一個引號後面是沒有任何逗號或封號，僅僅是回車換行。

grid-template

在單個聲明中定義 grid-template-rows、grid-template-columns、grid-template-areas的簡寫。就我的而言，仍是不要簡寫，由於簡寫以後可讀性會變差一些。

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

• none：將三個屬性都設置爲其初始值。所謂初始值默認爲一行一列一個區域，也就是說迴歸到塊元素本質，就是一個塊。網格佈局某些方面來講就是把咱們的一個塊給它用一種格子的形式把他區分爲多個格子，也能夠理解成是多個塊。
• subgrid：把 grid-template-rows 和 grid-template-columns 設置爲subgrid，而且 grid-template-areas 設置爲初始值。簡單強調一下，第一：所謂的把行跟列設置爲subgrid就是說仍是得本身定義一下行和列，都本身定義了，就沒必要再簡寫了；第二：把網格區域定義爲初始值，就是每一個區域的大小都是一個網格單元，若是是這樣其實就不必去定義它。subgrid是目前爲止全部瀏覽器都不兼容，那麼在這裏它依然適用，因此跟你們說一下：不推薦你們使用，只需瞭解知道便可。
• grid-template-rows / grid-template-columns：把 grid-template-rows 和 grid-template-columns 設置爲指定值，與此同時，設置 grid-template-areas 爲none

.container {
  grid-template:
    [row1-start] "head head head" 25px [row1-end]
    [row2-start] "foot foot foot" 25px [row2-end]
    / auto 50px auto;
}

等同於

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "head head head" 
    "foot foot foot";
}

不建議簡寫，避免混淆。

三、gap屬性

grid-column-gap / grid-row-gap

指定網格線的大小，能夠想象爲設置列/行之間間距的寬度。也能夠說是網格軌道之間的間距

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• line-size：一個長度值

grid-gap

grid-row-gap 和 grid-column-gap 的縮寫。

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

說明

起初是用 grid-gap 屬性來定義的，目前逐漸被 gap 替代。
若是沒有指定 grid-row-gap，則會被設置爲與 grid-column-gap 相同的值。

四、items屬性

justify-items

沿着行軸對齊網格內的內容。

.container {
  justify-items: start | end | center | stretch;
}

• start：內容與網格區域的左端對齊
• end：內容與網格區域的右端對齊
• center：內容位於網格區域的中間位置
• stretch：內容寬度佔據整個網格區域空間（這是默認值）

align-items

沿着列軸對齊網格內的內容。

.container {
  align-items: start | end | center | stretch;
}

• start：內容與網格區域的頂端對齊
• end：內容與網格區域的底部對齊
• center：內容位於網格區域的垂直中心位置
• stretch：內容高度佔據整個網格區域空間（這是默認值）

place-items

設置 justify-items 和 align-items 的簡寫形式。
注意：書寫順序爲先列軸屬性值後行軸屬性值。

.container {
  place-items: center;
}

以上表示水平和垂直居中。

五、content屬性

justify-content

設置網格容器內的網格沿着行軸對齊網格的對齊方式。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

• start：網格與網格容器的左邊對齊
• end：網格與網格容器的右邊對齊
• center：網格與網格容器的中間對齊
• stretch：調整 grid item 的大小，讓寬度填充整個網格容器
• space-around：在 grid item 之間設置均等寬度的空白間隙，其外邊緣間隙大小爲中間空白間隙寬度的一半
• space-between：在 grid item 之間設置均等寬度的空白間隙，其外邊緣無間隙
• space-evenly：在每一個 grid item 之間設置均等寬度的空白間隙，包括外邊緣

align-content

設置網格容器內的網格沿着列軸對齊網格的對齊方式。

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

• start：網格與網格容器的頂部對齊
• end：網格與網格容器的底部對齊
• center：網格與網格容器的中間對齊
• stretch：調整 grid item 的大小，讓高度填充整個網格容器
• space-around：在 grid item 之間設置均等高度的空白間隙，其外邊緣間隙大小爲中間空白間隙寬度的一半
• space-between：在 grid item 之間設置均等高度的空白間隙，其外邊緣無間隙
• space-evenly：在每一個 grid item 之間設置均等高度的空白間隙，包括外邊緣

place-content

設置 align-content 和 justify-content 的簡寫形式。
注意：書寫順序爲先列軸對齊屬性值後行軸對齊屬性值。

六、grid-auto屬性

grid-auto-columns / grid-auto-rows

指定自動生成的網格軌道（又名隱式網格軌道）的大小。

隱式網格軌道

隱式網格軌道在顯示的定位超出指定網格範圍的行或列時被建立。也就是說網格項超出，一種是太多了，還有一種分兩種狀況：若是說僅僅由於太多的話，咱們只須要控制行就能夠了，列這一塊的話確定是跟着上面是同樣的。可是有時列也會超出，超出狀況會在講到網格項的地方提到過，當網格項肯定在網格單元或網格區域的時候是能夠控制的，控制的時候除了網格區域的名字以外，它也能夠經過地址條網格線來控制，可是這個線的名字若是是超過的時候就會出來，那麼在這種狀況下就會自動生成隱式網格軌道。

隱式網格軌道我的是不建議你們使用的，由於咱們的這個隱式網格咱們在容器當中通常來講咱們在容器中統攬大局而後摳出局部，結果局部不禁大局控制反而影響大局，這就有點反客爲主，喧賓奪主的意思了，那在控制起來勢必會有混亂，因此隱式網格軌道不是特別提倡你們使用。

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• track-size：能夠是一個長度值，一個百分比，或者一個自由空間的一部分（使用 fr 單位）

grid-auto-flow

控制自動佈局算法的工做方式。

.container {
  grid-auto-flow: row | column | row dense | column dense
}

• row：告訴自動佈局算法依次填充每行，根據須要添加新行 （默認）
• column：告訴自動佈局算法依次填充每列，根據須要添加新列
• dense：告訴自動佈局算法，若是後面出現較小的 grid item，則嘗試在網格中填充空洞

注意：dense 只會更改網格項的可視順序，並可能致使它們出現亂序，這對可訪問性不利。

七、grid屬性

在單個屬性中設置全部如下屬性的簡寫： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。

固然像左對齊、右對齊這些對齊方式等就不能簡寫在上面。就是說咱們能夠把多少行多少列以及它的區域還有隱式軌道以及他的佈局方式均可以簡寫到 grid 裏面而且同時將 sets grid-column-gap 和 grid-row-gap設置爲他們的初始值，即便它們不能被此屬性顯示設置。

.container {
  grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

• none：將全部子屬性設置爲其初始值。
• grid-template-rows / grid-template-columns：將 grid-template-rows 和 grid-template-columns 分別設置爲指定值，將全部其餘子屬性設置爲其初始值
• grid-auto-flow [grid-auto-rows [/ grid-auto-columns]]：接受全部與 grid-auto-flow，grid-auto-rows 和 grid-auto-columns 相同的值。若是省略 grid-auto-columns，則將其設置爲 grid-auto-rows指定的值。若是二者都被省略，則它們被設置爲它們的初始值

.container {
  grid: [row1-start] "head head head" 1fr [row1-end]
        [row2-start] "foot foot foot" 25px [row2-end]
        / auto 50px auto;
}

等價於：

.container {
  grid-template-areas: 
    "head head head"
    "foot foot foot";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

簡寫形式就簡單的作一個介紹，實際開發當中不建議簡寫形式。

4、CSS函數

• repeat()
• fit-content()
• minmax()

一、repeat()

重複

跟蹤列表的重複片斷，容許大量顯示重複模式的列或行以更緊湊的形式編寫。

.container {
  grid-template-columns: repeat(repeat, values);
  grid-template-rows: repeat(repeat, values);
}

可用範圍：這個函數能夠用在 CSS Grid 屬性 grid-template-columns 和 grid-template-rows。

重複次數

• number：整數，肯定確切的重複次數。
• auto-fill：以網格項爲準自動填充。
• auto-fit：以網格容器爲準自動填充。

值

• length：非負長度。
• percentage：相對於列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長度。
• flex：單位爲 fr 的非負維度，指定軌道彈性佈局的係數值。
• max-content：表示網格的軌道長度自適應內容最大的那個單元格。
• min-content：表示網格的軌道長度自適應內容最小的那個單元格。
• auto：做爲最大值時，等價於 max-content。做爲最小值時，它表示軌道中單元格最小長寬（由min-width/min-height）的最大值。

二、fit-content()

內容適配

根據公式min（最大大小、最大值（最小大小、參數））將給定大小夾緊爲可用大小。

.container {
  grid-template-columns: fit-content([ <length> | <percentage> ]);
  grid-template-rows: fit-content([ <length> | <percentage> ]);
}

值

• length：一個絕對的長度。
• percentage：相對於給定軸上可用空間的百分比。

三、minmax()

長寬範圍

定義了一個長寬範圍的閉區間。

minmax([ <length> | <percentage> | <flex> | min-content | max-content | auto ],
[ <length> | <percentage> | <flex> | min-content | max-content | auto ]);

值（跟repeat的取值是同樣的）

• length：非負長度。
• percentage：相對於列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長度。
• flex：單位爲 fr 的非負維度，指定軌道彈性佈局的係數值。
• max-content：表示網格的軌道長度自適應內容最大的那個單元格。
• min-content：表示網格的軌道長度自適應內容最小的那個單元格。
• auto：做爲最大值時，等價於 max-content。做爲最小值時，它表示軌道中單元格最小長寬（由min-width/min-height）的最大值。

例如：

.container {
  grid-template-columns: minmax(300px, 50px);
}

minmax()這個函數前面‘300px’是最小值，後面‘50px’是最大值，也就是說範圍是從小到大的。當最小值大於最大值時，最大值將被忽略，整列會成爲最小值。

5、網格項上的屬性

• start / end ：規定每個網格項在那個區域當中
• grid-area：跟網格區域同樣
• self：自身裏面的對齊方式

start / end 和 grid-area 兩個屬性都是規劃出一個網格區域，把網格項放在一個網格區域裏面，惟一不一樣的是 start / end 是經過網格線來規劃出網格區域，而 grid-area 是經過網格區域在並列網格容器當中時就定義好的網格區域，而後直接來讀取這個網格區域就能夠了。

一、start / end 屬性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

使用特定網格線來肯定 網格項(grid item)在網格內的位置。

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

屬性值

• line ：能夠是一個數字來指代相應編號的網格線，也可以使用名稱指代相應命名的網格線
• span number ：網格項將跨越指定數量的網格軌道
• span name ：網格項將跨越一些軌道，直到碰到指定命名的網格線
• auto：自動佈局，或者自動跨度，或者跨越一個默認的軌道

說明

• 若是沒有聲明 grid-column-end / grid-row-end，默認狀況下，該網格項將跨越1個軌道。
• 網格項能夠相互重疊。可使用 z-index 來控制它們的堆疊順序。

grid-column / grid-row

grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的簡寫形式。

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

我的建議：斜槓先後的空格千萬不要省略，有時能夠識別，有時不可識別，對於瀏覽器來講小版本的話就會有差異。建議斜槓先後都要有空格。

屬性值

start-line / end-line：每一個值的用法都和屬性分開寫時的用法同樣

例如：

CSS代碼以下：

.container > .item:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

等同於

.container > .item:nth-child(1) {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

等同於

.container > .item:nth-child(1) {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}

二、grid-area 屬性

網格區域

給 gird item 進行命名以便於使用 grid-template-areas 屬性建立模板時來進行引用。

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

屬性值

• name ：grid-template-areas 中定義的命名
• row-start / column-start / row-end / column-end：能夠是數字，也能夠是網格線的名字

例如：

CSS代碼以下：

.container > .item-a {
    grid-area: row1-start / 2 / 3 / five;
}

等同於

.container > .item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 3;
}

例如：

CSS代碼以下：

.container > .item-a {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}

等同於

.container > .item-a {
    grid-area: 2 / 2 / 4 / 4;
}

三、self 屬性

justify-self

沿着行軸對齊 grid-item 裏的內容。

.item {
  justify-self: start | end | center | stretch;
}

屬性值

• start：將內容對齊到網格區域的左端
• end：將內容對齊到網格區域的右端
• center：將內容對齊到網格區域的中間
• stretch：填充網格區域的寬度（這是默認值）

align-self

沿着列軸對齊 grid-item 裏的內容。

.item {
  align-self: start | end | center | stretch;
}

屬性值

• start：將內容對齊到網格區域的頂部
• end：將內容對齊到網格區域的底部
• center：將內容對齊到網格區域的中間
• stretch：填充網格區域的高度（這是默認值）

本篇文章到此結束，歡迎提建議哈！

參考文獻：

https://developer.mozilla.org...

https://www.html.cn/archives/...