CSS 零基础教程

CSS Grid 项目放置：grid-row 和 grid-column 属性

在上一章中，我们介绍了 CSS Grid 以及如何使用 grid-template-rows 和 grid-template-columns 定义网格容器的结构。

现在，我们将深入研究如何在网格结构中放置项目。探讨 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 这几个属性，它们允许你精确控制单个网格项目的放置和尺寸。

1. 理解网格线 (Grid Lines) 和放置

使用 grid-row-start 等属性放置项目的核心概念在于引用网格线。当你定义行和列时，你隐式地创建了带编号的网格线。这些线充当定位网格项目的参考点。

  • 网格线 (Grid Lines): 定义网格结构的水平和垂直线。它们从 1 开始编号。
  • grid-row-start: 指定网格项目应该从哪条行线开始。
  • grid-row-end: 指定网格项目应该在哪条行线结束。
  • grid-column-start: 指定网格项目应该从哪条列线开始。
  • grid-column-end: 指定网格项目应该在哪条列线结束。

你可以把它想象成在网格上指定坐标。通过定义项目在行线和列线方面的起始和结束位置，你也就确定了它在网格中的确切位置和大小。

2. 使用 grid-row-start 和 grid-column-start

grid-row-start 和 grid-column-start 属性定义了网格项目的起始位置。

2.1 基础示例

考虑一个三行三列的网格。我们可以通过指定其起始行和列，将一个项目放置在左上角：

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1; /* 从第 1 条行线开始 */
  grid-column-start: 1; /* 从第 1 条列线开始 */
}

在这个例子中，.item 将被放置在网格的第一个单元格中。

2.2 重叠项目 (Overlapping Items)

可以将多个项目放置在同一个单元格中，从而导致重叠。例如：

<div class="grid-container">
  <div class="item item1">项目 1</div>
  <div class="item item2">项目 2</div>
</div>
.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
}

item1 和 item2 都将从行线 1 和列线 1 开始，导致它们在左上角的单元格中重叠。它们在 HTML 中出现的顺序将决定哪个项目在上面（堆叠上下文，你可能还记得定位元素模块中的内容）。

假设场景：想象你正在构建一个仪表盘布局。你可以使用 grid-row-start 和 grid-column-start 将不同的小部件定位在仪表盘的网格结构中，确保每个小部件都从其指定的区域开始。

3. 使用 grid-row-end 和 grid-column-end

grid-row-end 和 grid-column-end 属性定义了网格项目的结束位置，指定项目应该延伸到哪条网格线为止（但不包括该线之外的区域）。这允许你控制网格项目的大小，使其跨越多行或多列。

3.1 基础示例：跨越列

要使一个项目跨越两列，你可以将其 grid-column-end 设置为比 grid-column-start 大的值：

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: 3; /* 延伸直到列线 3 (占据 2 列) */
}

在这种情况下，.item 将从第 1 条行线和第 1 条列线开始，并延伸到第 3 条列线，有效地跨越了两列。

3.2 基础示例：跨越行

同样，要使一个项目跨越两行：

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3; /* 延伸直到行线 3 (占据 2 行) */
}

现在，.item 占据了网格的前两行。

3.3 同时跨越行和列

你可以组合这些属性来创建跨越多行和多列的项目：

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3; /* 延伸直到行线 3 (占据 2 行) */
  grid-column-end: 4; /* 延伸直到列线 4 (占据 3 列) */
}

这个 .item 现在将占据网格的左上角，跨越两行三列。

4. 配合 span 关键字使用

除了指定明确的结束线编号，你还可以使用 span 关键字来定义项目应该跨越多少行或列，这是相对于其 grid-row-start 或 grid-column-start 而言的。

4.1 span 关键字详解

span 关键字用于指定项目应跨越的轨道（行或列）数量。当你只知道想要覆盖多少轨道，而不想计算结束线编号时，它能简化语法。

4.2 示例：使用 span 跨越两列

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-column-end: span 2; /* 从列线 1 开始跨越 2 列 */
}

这等同于前面示例中的 grid-column-end: 3。该项目从列线 1 开始，跨越两列。

4.3 示例：使用 span 跨越三行

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: span 3; /* 从行线 2 开始跨越 3 行 */
}

在这里，项目从行线 2 开始并跨越三行，占据第 2、3 和 4 行。

4.4 使用 span 的优势

  • 可读性: 使用 span 通常使代码更具可读性和易于理解，尤其是在处理复杂布局时。它清楚地表明了跨越特定数量轨道的意图。
  • 可维护性: 如果你修改了网格结构（例如，添加或删除行/列），使用 span 可以减少更新 grid-row-end 和 grid-column-end 值的需要，因为项目仍将相对于其起始位置跨越指定数量的轨道。

4.5 结合明确的线编号和 span

你还可以结合使用明确的线编号和 span 关键字来创建更动态的布局。例如：

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(4, 100px);
}
.item {
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: span 2;
  grid-column-end: 4;
}

在这个例子中，项目将从行线 2 和列线 3 开始。它将向下跨越两行 (grid-row-end: span 2) 并在列线 4 结束 (grid-column-end: 4)。

5. 隐式网格 (Implicit Grid) 的创建

如果你将一个项目放置在显式定义的网格（使用 grid-template-rows 和 grid-template-columns 定义）之外，CSS Grid 将自动创建隐式网格轨道以容纳该项目。

5.1 隐式网格如何工作

当你使用 grid-row-start 等属性定位一个项目，并且指定的线编号超出了 grid-template-rows 和 grid-template-columns 定义的范围时，网格容器会自动创建隐式行和列。这些隐式轨道的大小是自动确定的，通常基于它们包含的内容。这将在接下来的课程中进一步探讨。

5.2 示例：在隐式行中放置项目

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px; /* 只有两个显式行 */
  grid-template-columns: 100px 100px 100px;
}
.item {
  grid-row-start: 3; /* 将项目放在第 3 行 */
  grid-column-start: 1;
}

在这种情况下，即使我们只使用 grid-template-rows 定义了两行，网格也会自动创建第三个隐式行来容纳 .item。

5.3 隐式网格的影响

  • 灵活性: 隐式网格提供了灵活性，允许你在显式定义的网格结构之外放置项目。
  • 不可预测性: 然而，过度依赖隐式网格可能导致不可预测的布局，因为隐式轨道的大小由浏览器自动确定。为了获得更多控制，通常建议使用 grid-template-rows 和 grid-template-columns 显式定义你的网格结构。