可選 元素 art 嵌套 min 可選值 align str sta

1、網格容器 我們通過在元素上聲明 display：grid 或 display：inline-grid 來創建一個網格容器。一旦我們這樣做，這個元素的所有直系子元素將成為網格項目。 2、網格軌道 （1）我們通過 grid-template-columns 和 grid-template-rows 屬性來定義網格中的行和列。這些屬性定義了網格的軌道。一個網格軌道就是網格中任意兩條線之間的空間。 // 幾種寫法 grid-template-columns: 200px 200px 200px; grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: 500px 1fr 2fr; grid-template-columns: 20px repeat(6, 1fr) 20px; （2）你也可以在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設置大小尺寸的軌道。 // 幾種寫法 grid-auto-rows: 200px; grid-auto-rows: minmax(100px, auto); 3、網格線（縮寫、默認跨度、反方向計數、span關鍵字、命名網格線布局） （1）grid-column-start 和 grid-column-end 屬性可以合並為 grid-column，grid-row-start 和 grid-row-end 則合並為grid-row。 （2）我們可以更進一步，給每個元素只定義一個屬性 grid-area。值的順序如下 * grid-row-start * grid-column-start * grid-row-end * grid-column-end

4、網格區域（網格單元、命名網格區域、留出空白的網格單元、跨越多個網格單元、用媒體查詢重新定義網格、簡寫、嵌套網格、使用z-index控制層級等） （1）grid-template 屬性可同時設置以下屬性： * grid-template-rows * grid-template-columns * grid-template-areas （2）grid 簡寫方式更進一步，它包含了與隱式網格相關的屬性，所以通過它可以同時設置以下屬性： * grid-template-rows * grid-template-columns * grid-template-areas * grid-auto-rows * grid-auto-columns * grid-auto-flow

5、網格間距 在兩個網格單元之間的 網格橫向間距 或 網格縱向間距 可使用 grid-column-gap 和 grid-row-gap 屬性來創建，或者直接使用兩個合並的縮寫形式 grid-gap。

6、CSS 網格布局中的自動定位 - 填充缺口 grid-auto-flow: dense;

7、網格布局中的盒模型對齊 （1）屬性 align-self 和 align-items 用於控制項目在塊方向的軸上對齊，通過設置這兩個屬性，可以改變網格區域中的項目的對齊方式。設置了 align-items 屬性，就相當於為網格的所有子項目都設置了 align-self 屬性，當然也可以為單獨的某一個網格元素設置它的個性化的 align-self 屬性。 （2）justify-items 和 justify-self 用於對齊項目到文本方向的列軸，可選值也和 align-self 一樣。 （3）通過組合使用 align 和 justify 屬性，讓項目居於網格區域的正中就變得非常容易了。 參考：MDN - grid

grid布局