容器屬性
grid
沒什么好說的，設(shè)置成grid布局。
grid-template-columns
將網(wǎng)格分成多少列，并設(shè)置每一列寬度（單位：px,%,fr）
fr: fraction, 分?jǐn)?shù)。等分的意思买猖。
grid-template-columns: 1fr 1fr 1fr;
// 將容器劃分成三列，每列寬度1/3.
grid-template-rows
同上滋尉，劃分行玉控。
grid-template-rows: 1fr 1fr;
// 將容器劃分成兩列，每列寬度1/2.
至此狮惜，我們將容器劃分成了兩行三列奸远。
1 | 2 | 3
4 | 5 | 6
grid-template-areas
要與子元素屬性(grid-area)結(jié)合起來。將某一個區(qū)域命名讽挟。
grid-areas:
"item1 item1 item2"
"item3 item3 item2"
格式如上懒叛。劃分的區(qū)域必須組成一個矩形！５⒚贰薛窥！
上述劃分意味著：
item1 | item1 | item2
item3 | item3 | item2
然后子級通過設(shè)置grid-area: item1 表示當(dāng)前元素占據(jù)第一行的1、2列眼姐。
grid-template
grid-template是grid-template-areas,grid-template-rows,grid-template-columns的縮寫诅迷。
grid-template: <grid-template-rows>/<grid-template-columns>
grid-template:
"item1 item1 item2" 1fr
"item3 item3 item2" 1fr
/ 1fr 1fr 1fr
// 等同于上面三部分代碼。
grid-gap
是grid-column-gap和grid-row-gap的縮寫众旗。代表網(wǎng)格間的間隙罢杉。
grid-gap: <grid-row-gap> <grid-column-gap>
place-items
是justify-items和align-items的縮寫.
place-items: <align-items> <justify-items>
place-items: start end;
設(shè)置該屬性后子元素的寬高不再是100%；而是等于內(nèi)容的寬高贡歧！
grid-atuo-flow
定義元素如何排列滩租，默認(rèn)是row，即“先行后列”利朵，一行排列不下后在換行排列律想。
四個屬性：row,row dense(不留空行), column, column dense
子元素屬性
grid-column
grid-column: <grid-column-start> / <grid-column-end>
// for example
grid-column: 1 / 3; // 占據(jù)兩個單元格
grid-column: 1 / span 2;
grid-row
同grid-column
grid-area
可以直接根據(jù)grid-template-areas定義的區(qū)域塊來定位元素占據(jù)的位置。
grid-area: item1; // 結(jié)合上面grid-template-areas的定義
or
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
place-self
作用同place-items一樣绍弟，只不過僅僅只作用于當(dāng)前元素
place-self: <align-self> <justify-self>;
