容器屬性

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é)合起來。將某一個(gè)區(qū)域命名。

grid-areas:
  "item1 item1 item2"
  "item3 item3 item2"

格式如上。劃分的區(qū)域必須組成一個(gè)矩形?。?！

上述劃分意味著：
item1 | item1 | item2
item3 | item3 | item2
然后子級(jí)通過設(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，即“先行后列”，一行排列不下后在換行排列。
四個(gè)屬性：row,row dense(不留空行), column, column dense

子元素屬性

grid-column

grid-column: <grid-column-start> / <grid-column-end>

// for example
grid-column: 1 / 3; // 占據(jù)兩個(gè)單元格
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>;