文中所有示例，可以下載我的示例專案,或直接去專案主頁檢視或除錯~❤️

簡介

佈局問題一直在不斷地被優化，最初可能是使用block、inline-block、table,或者直接使用float、position等... 後來flex出現了，我們可以快速地用它解決元素的一維分佈問題，例如居中，平均分佈等，這種處理是針對專案的一條軸線，所以可以稱為一維佈局。
而Grid Layout可以看成是flex佈局的升級版本，在2013年，《CSS佈局的未來趨勢》一文中就提出了Grid Layout，在2017年3月份之後，各大主流瀏覽器相繼宣佈開始支援css grid屬性。
Grid Layout（又名“網格”）是一個二維的基於網格的佈局系統，它將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，所以可以稱為二維佈局。網格佈局的目的只在於完全改變我們設計基於網格的使用者介面的方式。

瀏覽器支援度

具體的屬性可到caniuse上查詢 grid相關屬性相容性

基本概念

1.網格容器(Grid Container)

應用 display: grid 的元素。這是所有網格項（grid item）的直接父級元素。

2.網格項(Grid Item)

網格容器（Grid Container）的子元素.

3.網格線(Grid Line)

構成網格結構的分界線。它們既可以是垂直的（“列網格線(column grid lines)”），也可以是水平的（“行網格線(row grid lines)”），並位於行或列的任一側。

4.網格軌道(Grid Track)

兩條相鄰網格線之間的空間。你可以把它們認為網格的列或行。

5.網格單元格(Grid Cell)

行和列的交叉區域，是 Grid(網格) 系統的一個“單元”。

6.網格區域(Grid Area)

4條網格線包圍的總空間。一個網格區域(Grid Area) 可以由任意數量的網格單元格(Grid Cell) 組成，這個取決於開發者的定義

容器屬性

grid/inline-grid

display: grid // 常規網格佈局
display: inline-grid // 行內元素網格佈局
display: subgrid // 子元素網格佈局繼承，暫無瀏覽器支援查詢
複製程式碼

grid-template-columns / grid-template-rows

grid-template-columns // 屬性定義每一列的列寬
grid-template-rows // 屬性定義每一行的行高
複製程式碼

示例：

row-gap / column-gap / gap

row-gap: 20px // 行間距
column-gap: 20px // 列間距
gap: 20px // 簡寫
複製程式碼

示例：

grid-template-areas

定義容器區域，這個屬性單獨看沒有意義，需要單配專案屬性grid-area使用，稍後講解~

grid-auto-flow

grid-auto-flow: row / column / row dense / column dense
// 排列順序，預設是先行後列，還可以選擇先列後行，先行後列儘量不出現空白區域，先列後行儘量不出現空白區域
複製程式碼

示例：

justify-item / align-item / place-item

justify-items // 屬性設定單元格內容的水平位置（左中右）
align-items // 屬性設定單元格內容的垂直位置（上中下）
place-items // 簡寫,如果省略第二個值，則瀏覽器認為與第一個值相等
複製程式碼

可選值：
start：對齊單元格的起始邊緣 
end：對齊單元格的結束邊緣 
center：單元格內部居中 
stretch：拉伸，佔滿單元格的整個寬度（預設值）
複製程式碼

justify-items或者align-item填寫的時候，另外一個值預設是stretch

示例：

justify-content / align-content / place-content

justify-content // 屬性是整個內容區域在容器裡面的水平位置（左中右）
align-content // 屬性是整個內容區域的垂直位置（上中下）。
place-content // 簡寫，第二個值不寫，預設讀第一個值
複製程式碼

可選值 :
start
end
center
stretch
space-around // 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍。
spance-between // 專案與專案的間隔相等，專案與容器邊框之間沒有間隔。
space-evenly // 專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔。
如果省略第二個值，瀏覽器就會假定第二個值等於第一個值。
複製程式碼

grid-auto-columns / grid-auto-rows

有時候，一些專案的指定位置，在現有網格的外部。比如網格只有3列，但是某一個專案指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置專案。grid-auto-columns屬性和grid-auto-rows屬性用來設定，瀏覽器自動建立的多餘網格的列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小渲染，我們在這個示例中提到過 ps: 列的話不要嘗試，以為列增加不是單個而是一整列，是算到網格里的

grid-template / grid

grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合併簡寫形式。 grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式。寫起來比較魔性，不介意大家平時書寫，具體可以去張鑫旭的部落格詳細解讀一下

專案屬性

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

grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-start: 3;
複製程式碼

示例：

grid-column / grid-row

grid-column: <grid-column-start> <grid-column-end> // 簡寫
grid-row:  <grid-row-start> <grid-row-end>  // 簡寫
複製程式碼

示例：

grid-area

// 指定專案放在哪一個區域。
grid-area: row-start / column-start / row-end / column-end / 區域名
複製程式碼

起始網格線可以通過命名使用

示例：

justify-self / align-self / place-self

justify-self // 屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案
align-self // 屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個專案
place-self // 簡寫
複製程式碼

示例：

總結

Grid Layout 佈局雖然屬性較多，但是通過對行列的自由控制，極大地簡化了佈局的開發，大家抓緊嘗試起來！❤

進擊的佈局之Grid Layout