深入浅出 CSS Grid 布局：一篇通俗易懂的入门教程

CSS Grid 布局是 CSS3 中最强大的布局工具之一，它让我们能够更加灵活、精确地控制网页的布局，尤其是在复杂的网页设计中，CSS Grid 布局能够极大简化代码，提升开发效率。本文将通过一系列通俗易懂的案例，带你逐步了解和掌握 CSS Grid 布局。

什么是 CSS Grid？

CSS Grid 是一种二维的布局系统，允许我们在网页上创建复杂的网格布局。与传统的布局方式（如浮动、定位等）不同，CSS Grid 让我们可以在一个容器中定义行和列，从而精确地将元素放置在我们希望的位置。

Grid 布局的两个关键概念：

1. 容器（Grid Container）：即使用了 display: grid 的元素，是 Grid 布局的基础。
2. 项目（Grid Items）：容器内的直接子元素，它们将根据 Grid 的规则进行排列。

CSS Grid 基础

1. 启用 Grid 布局

要使用 CSS Grid 布局，只需要给容器元素设置 display: grid 或 display: inline-grid。其中，inline-grid 与 display: grid 的区别在于，inline-grid 是一个行内元素，适用于需要嵌套在其他元素中的情况。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局，每列占 1fr */
  gap: 10px; /* 网格项之间的间隔 */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

解释：

• grid-template-columns: repeat(3, 1fr) 表示将容器分成 3 列，每列宽度为 1fr（fr 代表分数单位，表示可分配的比例空间）。
• gap: 10px 设置网格项之间的间隔。

2. 定义行和列

你可以通过 grid-template-rows 和 grid-template-columns 来定义行和列。可以使用像素值、百分比、fr 等单位来设置列和行的大小。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* 定义 3 列 */
  grid-template-rows: 100px auto; /* 定义 2 行 */
  gap: 10px;
}

解释：

• grid-template-columns: 200px 1fr 2fr 表示第一列宽度为 200px，第二列宽度占据剩余空间的 1 部分，第三列占 2 部分。
• grid-template-rows: 100px auto 表示第一行的高度为 100px，第二行的高度自动适应内容。

3. 网格项的定位

使用 grid-column 和 grid-row 属性，你可以精确地控制网格项的位置，指定它们所占的行和列。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
 
.item1 {
  grid-column: 1 / 3; /* 从第一列到第二列 */
}
 
.item2 {
  grid-row: 2; /* 第二行 */
}

解释：

• .item1 { grid-column: 1 / 3 } 将 .item1 项从第一列开始，占两列（跨越第一列和第二列）。
• .item2 { grid-row: 2 } 将 .item2 项放置到第二行。

4. grid-template-areas 创建区域布局

grid-template-areas 是一种直观的方式来定义布局，特别适合于创建具有多个部分的页面布局。你可以通过命名区域来分配每个网格项的位置。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
  grid-template-areas:
    "header header header"
    "sidebar content footer";
  gap: 10px;
}
 
.header {
  grid-area: header;
}
 
.sidebar {
  grid-area: sidebar;
}
 
.content {
  grid-area: content;
}
 
.footer {
  grid-area: footer;
}

解释：

• grid-template-areas 使用字符串来定义布局区域，这些字符串对应的值是网格的列和行。
• .header, .sidebar, .content, .footer 分别使用 grid-area 属性来指定每个区域的位置。

结果：

• header 占据了整个第一行，sidebar 和 content 分别位于第二行的左右两侧，而 footer 占据了整个第三行。

更复杂的案例：响应式布局

CSS Grid 布局的一个重要特性是它非常适合做响应式设计。你可以通过媒体查询在不同屏幕尺寸下调整列数和布局。

1. 基础响应式布局

我们将创建一个 3 列的布局，在小屏幕下转换为 1 列布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
 
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 小屏幕时，变为单列布局 */
  }
}

解释：

• 默认情况下，grid-template-columns: 1fr 1fr 1fr 设置 3 列布局。
• 当屏幕宽度小于或等于 768px 时，grid-template-columns: 1fr 会将布局转换为单列。

2. 响应式网格内容适配

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
 
.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

解释：

• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 会让网格自动填充尽可能多的列，每列的最小宽度为 250px，最大宽度为 1fr。这使得容器在宽度变化时，网格项会自动调整，达到响应式布局的效果。

总结

CSS Grid 是一个强大的布局工具，具有以下几个特点：

• 二维布局：你可以同时控制行和列，定义更复杂的布局。
• 灵活性：你可以精确地控制元素的位置和大小，创建响应式布局，轻松适配不同屏幕尺寸。
• 简洁性：相比传统布局方式，Grid 语法简洁明了，尤其是结合 grid-template-areas，能让布局更加直观。

学习资源：

• MDN CSS Grid
• CSS-Tricks Grid Guide