css(八)：css布局-grid

1.首先设置网格的父级元素

display：grid

2.网格列宽设置

grid-template-colums:100px 10px 100px 10px 100px;
表示第1列100px，第2列10px(此列可作为列与列之间的间隙)

3.网格高度设置

grid-template-rows:auto 10px auto 10px;
表示第1行高度自适应内容，第2行10px(此列可作为列与列之间的间隙)
4.代码实现

效果如图：

1520911670(1).png

5.也可直接设置网格位置

上图中A字母的网格位置为：

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

O字母的网格位置为：

 grid-column-start: 5;
 grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;

因此若要将两个字母位置互换，可直接定义其网格线的位置。

6. 网格位置缩写

上上图中A字母的网格位置为：

 grid-column: 1 / 2;
 grid-row: 1 / 2;

还可进一步缩写为：
如O字母的网格位置为：

  grid-area: 3/5/4/6;

分别是 行起始位置/列起始位置/行结束位置/列结束位置