CSS Grid的隐式网格（Implicit Grid）：自动创建轨道的大小策略与放置规则

CSS Grid 隐式网格：自动创建轨道的大小策略与放置规则

大家好，今天我们深入探讨 CSS Grid 布局中一个重要的概念：隐式网格。与显式网格（通过 grid-template-rows 和 grid-template-columns 定义的网格）不同，隐式网格是在没有明确定义的情况下，Grid 容器自动创建的轨道。理解隐式网格对于掌握 Grid 布局的全部潜力至关重要，特别是当处理动态内容或者不确定数量的子元素时。

显式网格与隐式网格的区别

首先，让我们区分显式网格和隐式网格：

• 显式网格： 通过 grid-template-rows 和 grid-template-columns 属性明确定义的行和列。Grid 容器会按照这些属性的值创建指定数量和大小的轨道。
• 隐式网格： 当 Grid 项目被放置在显式网格之外，或者当 Grid 容器中的项目多于显式定义的轨道时，Grid 容器会自动创建额外的行和列，这些自动生成的轨道构成了隐式网格。

以下代码展示了显式网格和隐式网格共存的情况：

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px; /* 定义了两列 */
  grid-template-rows: 50px 50px;    /* 定义了两行 */
  gap: 10px;
}

.grid-container > div {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

在这个例子中，grid-template-columns 定义了两列，grid-template-rows 定义了两行，构成了一个 2×2 的显式网格。但是，我们有 8 个 Grid 项目，这意味着有 4 个项目将被放置在隐式网格中。Grid 容器会自动创建额外的行来容纳这些项目。

控制隐式网格的大小：grid-auto-rows 和 grid-auto-columns

CSS 提供了 grid-auto-rows 和 grid-auto-columns 属性来控制隐式网格轨道的大小。这两个属性定义了自动创建的行和列的默认大小。

• grid-auto-rows： 定义隐式创建的行的默认高度。
• grid-auto-columns： 定义隐式创建的列的默认宽度。

以下代码展示了如何使用 grid-auto-rows 设置隐式网格行的高度：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-auto-rows: 75px; /* 隐式行的高度 */
  gap: 10px;
}

在这个例子中，显式网格的行高是 50px，而隐式网格的行高是 75px。因此，Item 5、Item 6、Item 7 和 Item 8 将会占据高度为 75px 的行。

grid-auto-columns 的用法类似，可以用来设置隐式网格列的宽度。

grid-auto-rows 和 grid-auto-columns 的取值：

grid-auto-rows 和 grid-auto-columns 属性可以接受以下类型的值：

• 长度值（Length values）： 例如 100px、2em、5vw 等。定义固定的轨道大小。
• 百分比值（Percentage values）： 相对于 Grid 容器的尺寸。
• fr 单位： 表示网格容器剩余空间的比例单位。
• min-content： 轨道大小适应其内容所需的最小尺寸。
• max-content： 轨道大小适应其内容所需的理想尺寸。
• auto： 轨道大小由内容决定。这是 grid-auto-rows 和 grid-auto-columns 的默认值。
• minmax(min, max)： 定义轨道大小的范围，最小值为 min，最大值为 max。
• fit-content(length)： 相当于 minmax(auto, max-content)，但如果内容小于 length，则轨道大小为 auto，否则为 length。

例如：

.grid-container {
  grid-auto-rows: minmax(50px, auto); /* 最小高度 50px，最大高度由内容决定 */
  grid-auto-columns: 1fr;          /* 剩余空间等分给隐式列 */
}

控制隐式网格的自动放置：grid-auto-flow

grid-auto-flow 属性控制 Grid 项目在隐式网格中的自动放置方式。它决定了 Grid 项目是按行填充还是按列填充，以及是否允许“密集”填充。

grid-auto-flow 可以取以下值：

• row (默认值)： 按行填充。Grid 项目会尽可能地填充每一行，然后移到下一行。
• column： 按列填充。Grid 项目会尽可能地填充每一列，然后移到下一列。
• row dense： 按行填充，并且尝试填充网格中较早出现的空隙，即使这意味着改变项目的顺序。
• column dense： 按列填充，并且尝试填充网格中较早出现的空隙，即使这意味着改变项目的顺序。

按行填充 (row)：

这是默认的行为。Grid 项目会按照它们在 HTML 中的顺序，从左到右、从上到下依次填充网格。如果显式网格已满，则自动创建新的行。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
  grid-auto-flow: row; /* 默认值，可省略 */
  gap: 10px;
}

按列填充 (column)：

Grid 项目会按照它们在 HTML 中的顺序，从上到下、从左到右依次填充网格。如果显式网格已满，则自动创建新的列。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: column;
  gap: 10px;
}

密集填充 (dense)：

dense 关键字告诉 Grid 容器尝试填充网格中较早出现的空隙。这意味着 Grid 项目可能会改变它们在 HTML 中的顺序，以便更有效地利用空间。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
  grid-auto-flow: row dense;
  gap: 10px;
}

.grid-container > div:nth-child(1) {
  grid-column: 1 / 3; /* Item 1 占据两列 */
}

在这个例子中，Item 1 占据了两列。如果没有 dense 关键字，Item 2 将会从第三列开始放置，留下一个空隙。但是，由于使用了 row dense，Grid 容器会尝试将 Item 2 放置在第一行的空隙中，即使这意味着改变了它的顺序。

dense 的注意事项：

• dense 可能会改变 Grid 项目的视觉顺序，这可能会影响可访问性。确保在必要时使用 ARIA 属性来维护正确的语义顺序。
• dense 只会填充自动放置的项目产生的空隙，不会填充显式放置的项目产生的空隙。

结合显式放置与隐式放置

可以将显式放置（使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性）与隐式放置结合使用，以创建更复杂的布局。

以下代码展示了如何将一个项目显式地放置在隐式网格中：

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 50px);
  grid-auto-rows: 75px;
  gap: 10px;
}

.grid-container > div:nth-child(5) {
  grid-column: 1 / 3; /* Item 5 占据两列 */
  grid-row: 3;       /* Item 5 放置在第三行 */
}

在这个例子中，Item 5 被显式地放置在第三行，占据两列。由于第三行是隐式创建的，因此它的高度由 grid-auto-rows 属性决定。

隐式网格与命名网格线

即使是隐式网格，你也可以通过 grid-template-areas 来创建命名的网格区域，并间接地影响隐式网格线的命名。 不过直接命名隐式网格线的能力有限，通常的做法是先构建显式网格，然后根据需要扩展。

实际应用场景

隐式网格在以下场景中非常有用：

• 响应式布局： 可以根据屏幕尺寸动态地创建额外的行或列。
• 内容驱动的布局： 可以根据内容的数量自动调整网格的大小。
• 卡片布局： 可以轻松地创建卡片列表，并且自动换行。
• 瀑布流布局： 可以创建不规则的网格布局，其中项目的高度不同。

案例分析：动态卡片布局

假设我们需要创建一个动态的卡片布局，卡片的数量不确定。我们可以使用隐式网格来实现这个布局：

<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    <p>This is the content of card 1.</p>
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p>This is the content of card 2.</p>
  </div>
  <div class="card">
    <h3>Card 3</h3>
    <p>This is the content of card 3.</p>
  </div>
  <!-- 更多卡片 -->
</div>

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应列数，最小宽度 200px */
  grid-auto-rows: auto; /* 行高自适应内容 */
  gap: 10px;
}

.card {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 5px;
}

.card h3 {
  margin-top: 0;
}

在这个例子中，我们使用了 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 来创建自适应列数。auto-fill 关键字会尽可能多地创建列，每列的最小宽度为 200px，最大宽度为 1fr（剩余空间）。grid-auto-rows: auto 确保行高自适应卡片的内容。

总结：理解隐式网格，构建更灵活的布局

隐式网格是 CSS Grid 布局中一个强大而灵活的特性。通过 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 属性，可以控制自动创建的轨道的大小和放置方式，从而构建更加动态和自适应的布局。掌握隐式网格对于充分利用 Grid 布局的能力至关重要。

掌握隐式网格对于充分利用 Grid 布局的能力至关重要。理解隐式网格的原理和用法，可以帮助我们构建更加灵活和自适应的布局，更好地应对各种复杂的布局需求。通过结合显式网格和隐式网格，可以创造出无限可能的布局效果。

更多IT精英技术系列讲座，到智猿学院