CSS 网格布局：简洁优雅的页面布局方式

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

在定义了网格容器后，您需要使用 CSS 来设置网格的属性。网格的属性包括：

• display：将元素设置为网格容器。
• grid-template-columns：定义网格的列。
• grid-template-rows：定义网格的行。
• grid-gap：定义网格中项目之间的间距。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
}

上面的 CSS 代码将创建一个具有三列两行的网格。每一列和每一行都将具有相同的宽度和高度。网格中的项目将以 10 像素的间距排列。

使用 fr 单位创建灵活的布局

fr 单位是一种相对单位，它允许您创建灵活的布局。fr 单位的含义是“fractional unit”（分数单位）。这意味着您可以将网格的列或行设置为占据网格容器的某个分数。

例如，以下 CSS 代码将创建一个具有三列的网格，第一列和第三列各占据网格容器的 25%，第二列占据网格容器的 50%。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 10px;
}

使用 grid-template-areas 属性创建分区

grid-template-areas 属性允许您创建网格分区。网格分区是一种将网格划分为多个区域的方法。每个区域都可以包含一个或多个项目。

要使用 grid-template-areas 属性，您需要先定义网格的区域。您可以使用点号 (.) 来定义区域。例如，以下 CSS 代码将创建一个具有三个区域的网格：

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "main main main"
    "footer footer footer";
}

在定义了网格的区域后，您就可以将项目分配到这些区域。您可以使用 grid-area 属性来将项目分配到区域。例如，以下 CSS 代码将把项目 1 分配到 header 区域，把项目 2 分配到 main 区域，把项目 3 分配到 footer 区域：

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: main;
}

.item3 {
  grid-area: footer;
}

练习

您可以使用 CSS 网格布局来创建各种各样的网页布局。以下是一些练习题，您可以尝试一下：

1. 创建一个具有两列的网格，第一列包含导航栏，第二列包含正文内容。
2. 创建一个具有三列的网格，第一列和第三列包含侧边栏，第二列包含正文内容。
3. 创建一个具有四列的网格，第一列和第四列包含侧边栏，第二列和第三列包含正文内容。
4. 创建一个具有五列的网格，第一列和第五列包含侧边栏，第二列、第三列和第四列包含正文内容。