CSS 网格（grid）容器

网格容器

要使HTML元素表现为网格容器，必须将display属性设置为grid或inline-grid。网格容器由网格项组成，放置在列和行中。

grid-template-columns属性定义网格布局中的列数，并且可以定义每列的宽度。该值是以空格分隔的列表，其中每个值定义相应列的长度。如果希望网格布局包含4列，请指定4列的宽度，如果所有列应具有相同的宽度，则指定“auto”。

创建一个包含4列的网格：

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

尝试一下

注意：如果4列网格中有4个以上的项目，网格将自动添加新行以放入项目。

grid-template-columns属性还可用于指定列的大小（宽度）。

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

尝试一下

grid-template-rows属性定义每行的高度。

该值是以空格分隔的列表，其中每个值定义相应行的高度：

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

尝试一下

justify-content属性用于对齐容器内的整个网格。

注意：网格的总宽度必须小于容器的宽度，以使justify-content属性产生任何效果。

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

尝试一下

.grid-container {
  display: grid;
  justify-content: space-around;
}

尝试一下

.grid-container {
  display: grid;
  justify-content: space-between;
}

尝试一下

.grid-container {
  display: grid;
  justify-content: center;
}

尝试一下

.grid-container {
  display: grid;
  justify-content: start;
}

尝试一下

.grid-container {
  display: grid;
  justify-content: end;
}

尝试一下

align-content属性用于垂直对齐容器内的整个网格。

注意：网格的总高度必须小于容器的高度，以使align-content属性产生任何效果。

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

尝试一下

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

尝试一下

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

尝试一下

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

尝试一下

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

尝试一下

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

尝试一下