grid布局

1、grid 属性

制作一个三列网格布局，并设置第一行高度为 160 像素：

.grid-container {
  display: grid;
  grid: 160px / auto auto auto;
}

2、gap 属性

设置网格行与列之间的间隙：

.grid-container {
  gap: 50px;
}

（行与行，列与列）

3、row-gap 属性

指定网格行之间的间隔为 50 像素：

div {
  display: grid;
  row-gap: 50px;
}

4、grid-area 属性

以下实例设置 "item8" 从第 2 行开始和第 1 列开始， 横跨 2 行 3 列：

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

5、grid-auto-columns 属性

设置网格中列的默认大小：：

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

6、grid-auto-rows 属性

设置网格中行的默认大小：：

.grid-container {
  display: grid;
  grid-auto-rows: 150px;
}

7、grid-auto-flow 属性

逐列插入网格元素：

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

逐行插入网格元素：

.grid-container {
  display: grid;
  grid-auto-flow: rows;
}

8、grid-column 属性

设置 "item1" 在第 1 列开始，在第 5 列前结束：

.item1 {
  grid-column: 1 / 5;
}

 9、grid-column-start 属性

设置 "item1" 从第 2 列开始：

.item1 {
  grid-column-start: 2;
}

10、grid-column-end 属性

.item1 {
  grid-column-end: span 3;
}

11、grid-column-gap 属性

设置列之间的网格间距为 50px：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

12、grid-gap 属性

设置行与列的间隙为 50px：

.grid-container {
  grid-gap: 50px;
}

13、grid-row-gap 属性

设置行的间隙为 50px：

.grid-container {
  grid-row-gap: 50px;
}

14、grid-row-end 属性

设置 item1 跨越 3 行：

.item1 {
  grid-row-end: span 3;
}

15、grid-row-start 属性

设置 item1 从第 2 行开始：

.item1 {
  grid-row-start: 2;
}

16、grid-template 属性

制作一个三列网格布局，其中第一行高 150 像素：

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

17、grid-template-areas 属性

以下实例 item1 命名为 "myArea", 并跨越五列：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

18、grid-template-columns 属性

制作 4 列的网格容器：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

19、grid-template-rows 属性

指定行大小（高度）：

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

20、grid-row 属性

以下实例设置 "item1" 跨越两行：：

.item1 {
  grid-row: 1 / span 2;
}