freeCodeCamp CSS Grid 教程：使用 grid-column 控制网格项跨度

freeCodeCamp CSS Grid 教程：使用 grid-column 控制网格项跨度

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

理解网格线概念

在 CSS Grid 布局中，网格线是构成网格结构的基础。想象一下，网格是由一系列看不见的垂直线和水平线交叉组成的。这些线从左上角开始编号：

• 垂直方向（列线）从左到右编号为 1, 2, 3...
• 水平方向（行线）从上到下编号为 1, 2, 3...

对于一个 3 列的网格，实际上有 4 条垂直网格线（1 在最左边，4 在最右边）。同理，3 行的网格有 4 条水平网格线。

grid-column 属性详解

grid-column 是用于控制网格项在列方向上跨度的属性，它需要两个参数：

1. 起始线编号
2. 结束线编号

语法格式为：grid-column: <起始线> / <结束线>;

例如，grid-column: 1 / 3; 表示：

• 从第 1 条垂直网格线开始
• 延伸到第 3 条垂直网格线之前
• 实际跨越了 2 个网格列

实际应用示例

在 freeCodeCamp 的这个练习中，我们有一个 3x3 的网格布局，需要让第 5 个网格项占据最后两列。

解决方案是：

.item5 {
  grid-column: 2 / 4;
}

这表示：

• 从第 2 条垂直网格线开始（即第 1 列和第 2 列之间）
• 延伸到第 4 条垂直网格线（即网格最右边）
• 实际跨越了第 2 列和第 3 列

常见问题解答

Q: 为什么结束线是 4 而不是 3？ A: 因为 3 列的网格有 4 条垂直网格线，要跨越最后两列需要从第 2 条线到第 4 条线。

Q: 可以使用 span 关键字吗？ A: 可以，也可以写成 grid-column: 2 / span 2;，表示从第 2 条线开始，跨越 2 列。

扩展知识

grid-column 实际上是两个属性的简写：

• grid-column-start: 设置起始线
• grid-column-end: 设置结束线

类似地，控制行方向跨度可以使用 grid-row 属性，其用法与 grid-column 完全相同。

掌握网格线编号系统是使用 CSS Grid 布局的关键基础，后续更复杂的布局技巧都建立在这个概念之上。

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp