CSS Grid(網(wǎng)格) 布局（又稱為 “Grid(網(wǎng)格)” ），是一個二維的基于網(wǎng)格的布局系統(tǒng)它的目標是完全改變我們基于網(wǎng)格的用戶界面的布局方式熊镣。CSS 一直用來布局我們的網(wǎng)頁，但一直以來都存在這樣或那樣的問題。一開始我們用表格（table），然后是浮動（float）灾常，再是定位（postion）和內(nèi)嵌塊（inline-block），但是所有這些方法本質(zhì)上都是只是 hack 而已铃拇，并且遺漏了很多重要的功能（例如垂直居中）钞瀑。Flexbox 的出現(xiàn)很大程度上改善了我們的布局方式，但它的目的是為了解決更簡單的一維布局慷荔，而不是復雜的二維布局（實際上 Flexbox 和 Grid 能結(jié)合在一起工作雕什，而且配合得非常好）。Grid(網(wǎng)格) 布局是第一個專門為解決布局問題而創(chuàng)建的 CSS 模塊.
父元素 網(wǎng)格容器(Grid Container) 屬性
display
- grid ：生成一個塊級網(wǎng)格
- inline-grid ：生成一個內(nèi)聯(lián)網(wǎng)格
- subgrid ：如果你的網(wǎng)格容器本身是另一個網(wǎng)格的網(wǎng)格項（即嵌套網(wǎng)格）显晶，你可以使用這個屬性來表示
你希望它的行/列的大小繼承自它的父級網(wǎng)格容器贷岸，而不是自己指定的。
grid-template-columns / grid-template-rows
用來定義網(wǎng)格的列和行磷雇。這些值表示 網(wǎng)格大小偿警。
- <track-size>： 可以是長度值，百分比唯笙，或者等份網(wǎng)格容器中可用空間（使用 fr 單位）
- <line-name>：你可以選擇的任意名稱
grid-template-areas
通過引用 grid-area 屬性指定的 網(wǎng)格區(qū)域(Grid Area) 名稱來定義網(wǎng)格模板螟蒸。重復網(wǎng)格區(qū)域的名稱導致內(nèi)容跨越這些單元格。一個點號（
.）代表一個空的網(wǎng)格單元崩掘。這個語法本身可視作網(wǎng)格的可視化結(jié)構(gòu)七嫌。
- <grid-area-name>：由網(wǎng)格項的
grid-area指定的網(wǎng)格區(qū)域名稱 .（點號） ：代表一個空的網(wǎng)格單元- none：不定義網(wǎng)格區(qū)域
grid-template
用于定義 grid-template-rows ，grid-template-columns苞慢，grid-template-areas縮寫 (shorthand) 屬性
- none：將所有三個屬性設(shè)置為其初始值
- subgrid：將grid-template-rows诵原，grid-template-columns的值設(shè)為
subgrid，grid-template-areas設(shè)為初始值 - <grid-template-rows> / <grid-template-columns>：將 grid-template-columns和 grid-template-rows 設(shè)置為相應地特定的值，并且設(shè)置grid-template-areas為
none
grid-column-gap / grid-row-gap
指定網(wǎng)格線(grid lines)的大小皮假。你可以把它想象為設(shè)置列/行之間間距的寬度鞋拟。
- <line-size> ：長度值
grid-gap
grid-column-gap 和 grid-row-gap 的縮寫
- <grid-row-gap> <grid-column-gap>：長度值
justify-items
沿著 行軸線(row axis) 對齊 網(wǎng)格項(grid items) 內(nèi)的內(nèi)容（相反的屬性是 align-items沿著列軸線對齊）骂维。該值適用于容器內(nèi)的所有網(wǎng)格項惹资。
- start：將內(nèi)容對齊到網(wǎng)格區(qū)域(grid area)的左側(cè)
- end：將內(nèi)容對齊到網(wǎng)格區(qū)域的右側(cè)
- center：將內(nèi)容對齊到網(wǎng)格區(qū)域的中間（水平居中）
- stretch：填滿網(wǎng)格區(qū)域?qū)挾龋J值）
align-items
沿著 列軸線(column axis) 對齊 網(wǎng)格項(grid items) 內(nèi)的內(nèi)容（相反的屬性是 justify-items沿著行軸線對齊）。該值適用于容器內(nèi)的所有網(wǎng)格項航闺。
- start：將內(nèi)容對齊到網(wǎng)格區(qū)域(grid area)的頂部
- end：將內(nèi)容對齊到網(wǎng)格區(qū)域的底部
- center：將內(nèi)容對齊到網(wǎng)格區(qū)域的中間（垂直居中）
- stretch：填滿網(wǎng)格區(qū)域高度（默認值）
justify-content
有時褪测，你的網(wǎng)格合計大小可能小于其 網(wǎng)格容器(grid container) 大小。 如果你的所有 網(wǎng)格項(grid items) 都使用像
px這樣的非靈活單位設(shè)置大小潦刃，在這種情況下侮措，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式。 此屬性沿著 行軸線(row axis) 對齊網(wǎng)格（相反的屬性是 align-content乖杠，沿著列軸線對齊網(wǎng)格）分扎。
- start：將網(wǎng)格對齊到 網(wǎng)格容器(grid container) 的左邊
- end：將網(wǎng)格對齊到 網(wǎng)格容器 的右邊
- center：將網(wǎng)格對齊到 網(wǎng)格容器 的中間（水平居中）
- stretch：調(diào)整 網(wǎng)格項(grid items) 的寬度，允許該網(wǎng)格填充滿整個 網(wǎng)格容器 的寬度
- space-around：在每個網(wǎng)格項之間放置一個均勻的空間胧洒，左右兩端放置一半的空間
- space-between：在每個網(wǎng)格項之間放置一個均勻的空間畏吓，左右兩端沒有空間
- space-evenly：在每個柵格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間
align-content
網(wǎng)格合計大小可能小于其 網(wǎng)格容器(grid container) 大小卫漫。 如果你的所有 網(wǎng)格項(grid items) 都使用像
px這樣的非靈活單位設(shè)置大小菲饼，在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式列赎。 此屬性沿著 列軸線(column axis) 對齊網(wǎng)格（相反的屬性是 justify-content宏悦，沿著行軸線對齊網(wǎng)格）。
- start：將網(wǎng)格對齊到 網(wǎng)格容器(grid container) 的頂部
- end：將網(wǎng)格對齊到 網(wǎng)格容器 的底部
- center：將網(wǎng)格對齊到 網(wǎng)格容器 的中間（垂直居中）
- stretch：調(diào)整 網(wǎng)格項(grid items) 的高度包吝，允許該網(wǎng)格填充滿整個 網(wǎng)格容器 的高度
- space-around：在每個網(wǎng)格項之間放置一個均勻的空間饼煞，上下兩端放置一半的空間
- space-between：在每個網(wǎng)格項之間放置一個均勻的空間，上下兩端沒有空間
- space-evenly：在每個柵格項目之間放置一個均勻的空間诗越，上下兩端放置一個均勻的空間
grid-auto-columns / grid-auto-rows
指定任何自動生成的網(wǎng)格軌道(grid tracks)（又名隱式網(wǎng)格軌道）的大小砖瞧。在你明確定位的行或列（通過 grid-template-rows/ grid-template-columns），超出定義的網(wǎng)格范圍時掺喻，隱式網(wǎng)格軌道被創(chuàng)建了芭届。
- <track-size>：可以是長度值，百分比感耙，或者等份網(wǎng)格容器中可用空間（使用 fr 單位）
子元素 網(wǎng)格項(Grid Items) 屬性
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通過指定 網(wǎng)格線(grid lines) 來確定網(wǎng)格內(nèi) 網(wǎng)格項(grid item) 的位置褂乍。 grid-column-start / grid-row-start是網(wǎng)格項目開始的網(wǎng)格線，grid-column-end / grid-row-end是網(wǎng)格項結(jié)束的網(wǎng)格線即硼。
- <line> ：可以是一個數(shù)字引用一個編號的網(wǎng)格線逃片，或者一個名字來引用一個命名的網(wǎng)格線
- span <number> ：該網(wǎng)格項將跨越所提供的網(wǎng)格軌道數(shù)量
- span <name> ：該網(wǎng)格項將跨越到它與提供的名稱位置
- auto ：表示自動放置，自動跨度，默認會擴展一個網(wǎng)格軌道的寬度或者高度
grid-column / grid-row
分別為 grid-column-start+ grid-column-end和 grid-row-start+ grid-row-end 的縮寫形式
- <start-line> / <end-line>：每個網(wǎng)格項都接受所有相同的值褥实，作為普通書寫的版本呀狼，包括跨度
grid-area
為網(wǎng)格項提供一個名稱，以便可以 被使用網(wǎng)格容器 grid-template-areas屬性創(chuàng)建的模板進行引用损离。 另外哥艇，這個屬性可以用作grid-row-start + grid-column-start+ grid-row-end+ grid-column-end的縮寫。
- <name>：你所選的名稱
- <row-start> / <column-start> / <row-end> / <column-end>：數(shù)字或分隔線名稱
justify-self
沿著 行軸線(row axis) 對齊 網(wǎng)格項 內(nèi)的內(nèi)容（ 相反的屬性是 align-self僻澎，沿著列軸線(column axis)對齊）貌踏。此值適用于單個網(wǎng)格項內(nèi)的內(nèi)容。
- start：將內(nèi)容對齊到網(wǎng)格區(qū)域的左側(cè)
- end：將內(nèi)容對齊到網(wǎng)格區(qū)域的右側(cè)
- center：將內(nèi)容對齊到網(wǎng)格區(qū)域的中間（水平居中）
- stretch：填充整個網(wǎng)格區(qū)域的寬度（這是默認值）
align-self
沿著 列軸線(column axis) 對齊 網(wǎng)格項 內(nèi)的內(nèi)容（ 相反的屬性是 justify-self窟勃，沿著 行軸線(row axis) 對齊）祖乳。此值適用于單個網(wǎng)格項內(nèi)的內(nèi)容。
- start：將內(nèi)容對齊到網(wǎng)格區(qū)域的頂部
- end：將內(nèi)容對齊到網(wǎng)格區(qū)域的底部
- center：將內(nèi)容對齊到網(wǎng)格區(qū)域的中間（垂直居中）
- stretch：填充整個網(wǎng)格區(qū)域的高度（這是默認值）
