---

CSS 网格布局

CSS 网格布局是一种新的布局方式，用于创建灵活的网格布局，它使得实现复杂的布局变得更加容易。网格布局可以轻松地定义一组网格线，这些网格线可以用于布局文本、图像或其他元素，是一种非常强大的工具。

基本概念

CSS 网格布局有两个关键概念：网格容器和网格项目。

• 网格容器：指定一个网格容器，用于布局网格项目。通过display: grid来定义一个网格容器。
• 网格项目：指定一个网格项目，添加到网格容器中。通过grid-column和grid-row来定义网格项目。

网格布局属性

CSS 网格布局属性主要包括以下几种：

• display: grid：定义一个网格容器
• grid-template-rows：定义网格行的数量、高度和名称
• grid-template-columns：定义网格列的数量、宽度和名称
• grid-template-areas：定义网格区域名称
• grid-gap：定义网格项目之间的间隔

网格行和网格列

网格行和网格列是网格布局的基本单位。在定义网格布局时，需要定义网格行的数量和高度、网格列的数量和宽度。

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

上面代码中，定义了一个网格容器，该容器包含两行和三列。

网格项

网格项是放置在网格布局中的元素。可以通过grid-column和grid-row来定位网格项。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item-2 {
  grid-column: 3;
  grid-row: 1 / 3;
}

上面代码中，定义了两个网格项，item-1占据了前两列的空间，位于第一行；item-2占据了第三列的空间，位于前两行。

网格区域

网格布局还可以通过grid-template-areas来定义网格区域。

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

上面代码中，定义了一个包含三个行和三个列的网格布局，并且定义了四个网格区域：header、sidebar、content、footer。每个网格项使用了grid-area属性进行定位。