進擊的佈局之Grid Layout

文中全部示例，能夠下載個人示例項目,或直接去項目主頁查看或調試~❤️

簡介

佈局問題一直在不斷地被優化，最初多是使用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 佈局雖然屬性較多，可是經過對行列的自由控制，極大地簡化了佈局的開發，你們抓緊嘗試起來！❤