Gird快速入门（手把手敲demo）

掘金前端

新晨437

2025年11月19日 21:02

Gird 布局是 CSS 中目前最强大、最成熟的二维布局方案，它可以让您轻松创建复杂的网页结构。

这份快速入门指南将带您从零开始，快速掌握 Grid 的核心概念和用法。

1. 什么是 CSS Grid？

CSS Grid Layout（网格布局）是一个二维的布局系统，意味着它可以同时处理行和列。这与 Flexbox（一维布局，主要处理行或列）形成鲜明对比。

核心思想：将一个容器划分为一个个网格，你可以将子元素放置在这些网格的任意位置，甚至可以创建复杂的、不对称的布局。

2. 基本概念

在开始之前，先了解两个核心概念：

Grid Container（网格容器）：应用了 display: grid; 的元素。它的所有直接子元素将成为 Grid Item。
Grid Item（网格项目）：Grid Container 的直接子元素。

<div class="container"> <!-- Grid Container -->
  <div class="item">1</div> <!-- Grid Item -->
  <div class="item">2</div> <!-- Grid Item -->
  <div class="item">3</div> <!-- Grid Item -->
</div>

3. 快速启动：创建一个简单的网格

让我们通过一个简单的例子，一步步创建一个 3x3 的网格。

步骤 1：定义网格容器

首先，将一个元素的 display 属性设置为 grid 或 inline-grid。

.container {
  display: grid;
}

现在，.container 就成为了一个网格容器，它的直接子元素自动成为了网格项目。

步骤 2：划分行和列（定义网格轨道）

这是 Grid 布局的核心。我们使用 grid-template-columns 和 grid-template-rows 属性来定义网格的结构。

grid-template-columns：定义每一列的宽度。
grid-template-rows：定义每一行的高度。

让我们定义一个 3 列（每列 100px）和 3 行（每行 100px）的网格：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 三列，每列100px */
  grid-template-rows: 100px 100px 100px;    /* 三行，每行100px */
}

更现代的写法：使用 repeat() 函数 当列或行很多时，repeat() 函数非常有用。

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 等同于 100px 100px 100px */
  grid-template-rows: repeat(3, 100px);
}

灵活的写法：使用 fr 单位 fr（fraction）单位代表网格容器中的等分空间，它让布局变得非常灵活。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 总宽度分为4份，第二列占2份，第一、三列各占1份 */
  grid-template-rows: repeat(3, 100px);
}

混合使用：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 20%; /* 第一列固定200px，第三列是容器的20%，中间列占据剩余空间 */
}

步骤 3：网格间隙（Gap）

使用 gap 属性可以设置网格项目之间的间距。它是 row-gap 和 column-gap 的简写。

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px; /* 行和列的间隙都是10px */
  /* 或者分开写： */
  /* row-gap: 15px; */
  /* column-gap: 10px; */
}

到此为止，一个标准的 3x3 网格就创建好了！你的 HTML 和 CSS 看起来应该是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    .item {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <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 class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>
</html>

4. 高级操作：放置网格项目

默认情况下，项目会按顺序逐行逐列填充网格。但 Grid 的强大之处在于你可以精确控制每个项目的位置。

我们通过 网格线（Grid Lines） 来定位项目。网格线是划分网格的线，从 1 开始编号（也从 -1 开始倒序编号）。

CSS Grid Lines转存失败，建议直接上传图片文件

使用以下属性来控制项目位置：

grid-column-start
grid-column-end
grid-row-start
grid-row-end
简写：grid-column 和 grid-row

示例：让第一个 item 横跨两列

.item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; /* 从第1条纵线开始，到第3条纵线结束 */
  /* 简写： */
  /* grid-column: 1 / 3; */
}

示例：创建一个页面的经典布局

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，主内容区自适应 */
  grid-template-rows: auto 1fr auto; /* 页头和页脚高度由内容决定，主内容区占据剩余空间 */
  height: 100vh; /* 让容器充满整个视口高度 */
  gap: 10px;
}

header {
  grid-column: 1 / -1; /* 从第1条纵线开始，到最后一条纵线结束（横跨所有列） */
  background: lightblue;
}

aside {
  grid-column: 1 / 2; /* 占据第一列 */
  background: lightcoral;
}

main {
  grid-column: 2 / 3; /* 占据第二列 */
  background: lightgreen;
}

footer {
  grid-column: 1 / -1; /* 横跨所有列 */
  background: lightgray;
}

5. 快速总结与最佳实践

启动：display: grid;
定义结构：
- grid-template-columns: 定义列。
- grid-template-rows: 定义行。
- 善用 repeat() 和 fr 单位。
设置间距：gap。
精细控制项目：使用 grid-column 和 grid-row 基于网格线进行定位。

命名网格线：对于复杂布局，可以给网格线起名字，让代码更易读。

.container {
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}
header {
  grid-column: sidebar-start / content-end;
}

练习建议

打开浏览器的开发者工具，在 Elements 或 Inspector 面板中，找到你的网格容器，旁边会有一个 grid 的标签，点击它可以在页面上可视化你的网格结构。这是学习和调试 Grid 的绝佳方式！

Grid 布局功能非常丰富，还包括网格区域（grid-template-areas）、对齐属性（justify-items, align-content等），但掌握了以上核心内容，你已经可以应对 90% 的布局需求了。快去动手试试吧！

阅读视图