学习 grid 布局

容器属性

grid

没什么好说的，设置成grid布局。

grid-template-columns

将网格分成多少列，并设置每一列宽度（单位：px,%,fr）

fr: fraction, 分数。等分的意思。

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)结合起来。将某一个区域命名。

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

格式如上。划分的区域必须组成一个矩形！！！

上述划分意味着：
item1 | item1 | item2
item3 | item3 | item2
然后子级通过设置grid-area: item1 表示当前元素占据第一行的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的缩写。代表网格间的间隙。

grid-gap: <grid-row-gap> <grid-column-gap>

place-items

是justify-items和align-items的缩写.

place-items: <align-items> <justify-items>

place-items: start end;

设置该属性后子元素的宽高不再是100%；而是等于内容的宽高！

grid-atuo-flow

定义元素如何排列，默认是row，即“先行后列”，一行排列不下后在换行排列。
四个属性：row,row dense(不留空行), column, column dense

子元素属性

grid-column

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

// for example
grid-column: 1 / 3; // 占据两个单元格
grid-column: 1 / span 2;

grid-row

同grid-column

grid-area

可以直接根据grid-template-areas定义的区域块来定位元素占据的位置。

grid-area: item1; // 结合上面grid-template-areas的定义

or

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

place-self

作用同place-items一样，只不过仅仅只作用于当前元素

place-self: <align-self> <justify-self>;