grid网格布局

​父容器属性

grid 所有网格容器的简写属性

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

grid-template-areas 与子元素 grid-area 结合使用

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

grid-template-rows 指定行大小（高度）

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

grid-template-columns 设置网格中列的默认大小

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

指定列数：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

grid-auto-rows 设置网格中行的默认大小

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

grid-auto-flow 逐列插入网格元素

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

grid-row-gap 设置行的间隙

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

grid-column-gap 设置列的间隙

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

grid-gap 设置行与列的间隙

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

子元素属性

grid-area 与父元素 grid-template-areas结合使用

.item1 { grid-area: header; }
.item1 { grid-area: 1 / 1 / 2 / 2; }

grid-column 定义网格元素列的开始和结束位置

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

更多

grid网格布局