概念：grid布局又稱css網格布局，（又名「網格」）是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式
和grid-template-columns一起，單位統一
a.fr單位
b.repeat()方法
注：網格中提供了乙個新的單位：fr ( 比例單位 )
寫法：
12
3
**如下：
grid-template:
"a1 a1 a1" 1fr
"a3 a3 a2" 1fr
"a3 a3 a2" 1fr
/1fr 1fr 1fr;
預設 : stretch 預設值，拉伸。表現為水平或垂直填充。
start 起始位置對齊
center：中心位置對齊
end：結束位置對齊
預設 : stretch 預設值，拉伸。表現為水平或垂直填充。
start
center
end
屬性值：
stretch（預設）
start
endcenter
space-between：表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配
space-around：around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半
space-evenly：evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等
預設：stretch
start
endcenter
space-between
space-around
space-evenly
1.對應網格的名字
2.寫對應的水平線的排列數字：grid-area : 1 / 3 / span 2 / 4;
寫法：grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-column-start 水平方向上佔據的起始位置
grid-column-end 水平方向上佔據的結束位置
grid-row-start 垂直方向上佔據的起始位置
grid-row-end 垂直方向上佔據的結束位置
注：a.只有在grid-column-end和 grid-row-end 中可以設定span操作。span去設定的不是結束位置，而是個數。
b.正常數字是位置，加上span是個數。
grid-column:3 / 4;
grid-column-start / grid-column-end
grid-row:1 / span 2;
grid-row-start / grid-row-end
12
34
html5逆戰班2002期–第四周 grid網格布局總結
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 網格布局
同 指定容器內部的多個專案的位置 異 指定三行三列 寬高為10px grid template columns 10px 10px 10px grid template rows 10px 10px 10px簡寫 grid template columns repeat 3,10px auto fi...