[TOC] > [阮一峰 grid 教程] (https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html) ## 概述 啟動 grid ``` display:grid ``` > 注意，設為網格布局以后，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。 ## 容器屬性 ### grid-template-columns 定義每列寬 ### grid-template-rows 定義每行的寬 grid-template-columns與 grid-template-row 語法一致 語法 ``` grid-template-columns: 200px 200px // 每多一個元素多一行 grid-template-columns: 33.33% 33.33% 33.33% // 也可使用百分號 grid-template-columns: repeat(auto-fill, 100px); // 固定列寬,響應式加列數目 grid-template-columns: repeat(3, 33.33%) // 使用 repeat 復寫 grid-template-columns: 1fr 2fr // 分2列,第一個為第二列的2倍 grid-template-columns: 100px 1fr 2fr // 分3列,第一個100px,剩下的寬度第三個為第二列的2倍 grid-template-columns: 100px minmax(100px,200px) 100px // 中間列,最小100px,最大200px,放大縮小時,中間列優先改變 grid-template-columns: 100px auto 100px; // 中間列根據自動列寬 grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // 使用方括號指定每個網格線的名字 ``` 示例 ``` .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } ``` ### grid-row-gap 行屬性 ### grid-column-gap 列屬性， ### grid-gap 簡寫屬性 ``` grid-row-gap: 20px; grid-column-gap: 20px; grid-gap: 20px 20px; ``` > grid-gap 如何省略第二個值,那么第二個值等于第一個值 ### grid-template-areas 合并網格 ``` <style> .a{grid-area: a;} .b{grid-area: b;} .c{grid-area: c;} .d{grid-area: d;} .e{grid-area: e;} .wrapper{ display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px 200px 200px; grid-template-areas: "a a a" "b c d" "e . ." } .wrapper>div{ } .wrapper>div:nth-child(odd){ background-color: #3dbe86; } .wrapper>div:nth-child(even){ background-color: #2aa471; } </style> <div class="wrapper"> <div class="a">1</div> <div class="b">2</div> <div class="c">3</div> <div class="d">4</div> <div class="e">5</div> </div> ```  ### grid-auto-flow 行列優先級 默認的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行,通過 grid-auto-flow 可先行后列 ``` grid-auto-flow: column|row; ``` ### justify-items 水平位置 ``` .container { justify-items: start; } ``` 效果  ### align-items 垂直位置 ``` .container { align-items: start; } ```  ### place-items 水平垂直位置 ``` .container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; } place-items: <align-items> <justify-items>; ``` 屬性描述 ``` start：對齊單元格的起始邊緣。 end：對齊單元格的結束邊緣。 center：單元格內部居中。 stretch：拉伸，占滿單元格的整個寬度（默認值）。 ``` > [參考在線代碼](https://jsbin.com/loluhuvota/edit?css,output) ### justify-content justify-content屬性是整個內容區域在容器里面的水平位置（左中右） **start**  **space-around**  **space-between**  **space-evenly** 項目間隔與到兩邊的間隔都一樣  ### align-content align-content屬性是整個內容區域的垂直位置（上中下）  ### place-content 合并寫法 ``` .container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; } ``` *-content 表示對 容器 wrapper 進行對齊, ## 項目屬性 ### grid-[column|rows]-[start|end] ``` grid-column-start屬性：左邊框所在的垂直網格線 grid-column-end屬性：右邊框所在的垂直網格線 grid-row-start屬性：上邊框所在的水平網格線 grid-row-end屬性：下邊框所在的水平網格線 ``` > 可是使用數字表示網格先,也可是使用 span 表示跨域幾個網格 示例1:指定垂直線 ``` .item-1 { grid-column-start: 2; // 從第二垂直到第四垂直線 grid-column-end: 4; } ```  示例2: 指定垂直水平線 ``` .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; } ```  示例3: span 跳轉 ``` .item-1 { grid-column-start: span 2; } ```  ### grid-area grid-area屬性指定項目放在哪一個區域。 ``` .item-1 { grid-area: e; } ``` ### [justify|align|space|-self 只作用于單個項目 `justify-self`屬性設置單元格內容的水平位置（左中右），跟`justify-items`屬性的用法完全一致，但只作用于單個項目。