容器裡面的水平區域稱為"行"（row），垂直區域稱為"列"（column）。
//容器屬性
display: grid指定乙個容器採用網格布局
display: inline-grid;行內元素。
注意，設為網格布局以後，容器子元素（專案）的float、display: inline-block、display: table-cell、 vertical-align和column-
*等設定都將失效。
grid-template-columns:
100px 100px 100px;
//定義每一列的列寬
grid-template-rows:
100px 100px 100px;
//定義每一行的行高
grid-template-columns:
[c1]
100px [c2]
100px [c3] auto [c4]
;//定義網格線名稱
grid-template-rows:
[r1]
100px [r2]
100px [r3] auto [r4]
;//定義網格線名稱允許同一根線有多個名 字，比如[fifth-line row-5]。
grid-row-gap:
20px;
//行間距
grid-column-gap:
20px;
//列間距
縮寫：grid-gap:
20px 20px;
//根據最新標準，上面三個屬性名的grid-字首已經刪除
//定義區域
grid-template-areas:
'a b c'
'd . f'
'g h i'
; 區域不需要利用，則使用"點"（.）表示。
'注意，區域的命名會影響到網格線。每個區域的起始網格線，會自動命名為區域名-start，終止網格線自動命名為區 網域名稱-end。
'比如，區域名為header，則起始位置的水平網格線和垂直網格線叫做header-start，終止位置的水平網格線和垂直 網格線叫做header-end。'
grid-auto-flow: column;
//先行後列 row先列後行
row dense和column dense。這兩個值主要用於，某些專案指定位置以後，剩下的專案怎麼自動放置。
grid-auto-rows:
50px;
//不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行 高。
justify-items: start | end | center | stretch;
//屬性設定單元格內容的水平位置（左中右）
align-items: start | end | center | stretch;
//屬性設定單元格內容的垂直位置（上中下）
縮寫：place-items: start end
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
//整個內容區域在容器裡面的水平位置（左中右）
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
//整個內容區域的垂直位置（上中下）。
縮寫：place-content: space-around space-evenly;
//專案屬性（item）
grid-area: h //指定專案放在哪乙個區域。
grid-area://
/; grid-area:1/
1/3/
3;grid-column-start屬性：左邊框所在的垂直網格線
grid-column-end屬性：右邊框所在的垂直網格線
grid-row-start屬性：上邊框所在的水平網格線
grid-row-end屬性：下邊框所在的水平網格線
grid-column-start:2;
grid-column-end:4;
//指定專案位置，列寬是第2根到第4根 （也可指定的是網格線名）
grid-column-start: span 2
;//表示列寬是2個單元格 等價於 grid-column-end: span 2;
縮寫形式 grid-column:1/
3;grid-row:1/
2;justify-self: start | end | center | stretch;
//設定單元格內容的水平位置（左中右）
align-self: start | end | center | stretch;
//設定單元格內容的垂直位置（上中下），
縮寫： place-self:
;//關鍵字
repeat
('重複次數'，'重複值'
) grid-template-rows:
repeat(3
,33.33%)
; grid-template-columns:
repeat(2
,100px 20px 80px)
; auto-fill 自動填充列數/行數
grid-template-columns:
repeat
(auto-fill,
100px);fr
(類似flex：1的用法)如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。
minmax
(最小值，最大值)
grid-template-columns:
1fr 1fr minmax
(100px,
1fr);
auto 關鍵字表示由瀏覽器自己決定長度。
grid-template-columns:
100px auto 100px;
2019/03
/grid-layout-tutorial.html
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...
CSS Grid 網格布局
css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局 通過設定display的屬性為grid或inline grid來建立網格容器 display grid 預設行排列，寬度為容器的寬度 container複製 圖1 1.png display inline grid cont...
CSS Grid 網格布局
概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...