CSS Subgrid 是一个强大的布局工具，它允许子网格直接从父网格继承其行列尺寸，而不需要显式地设置。这使得创建复杂的网格布局变得更加简单。

基本概念

在介绍 Subgrid 之前，我们需要了解一些基本概念：

  • Grid Container: 网格容器是包含 display: grid; 的元素。
  • Grid Item: 网格项是网格容器内部的子元素。
  • Grid Line: 网格线是网格的行和列的边界。

使用 Subgrid

要使用 Subgrid，我们需要在父网格容器上设置 grid-template-rows 和 grid-template-columns，并在子网格项上设置 grid-area 属性。

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.child-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
}

.child-grid > div {
  grid-area: 1 / 1 / 2 / 3;
}

在上面的例子中，.child-grid 是 .parent-grid 的子网格。.child-grid > div 是一个网格项，它占据了父网格的两个单元格。

实例

下面是一个使用 Subgrid 的实例，展示了如何创建一个两列布局，其中一列是另一列的两倍宽度。

<div class="parent-grid">
  <div class="child-grid">
    <div>内容 1</div>
    <div>内容 2</div>
  </div>
  <div class="child-grid">
    <div>内容 3</div>
    <div>内容 4</div>
  </div>
</div>

.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.child-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
}

.child-grid > div {
  grid-area: 1 / 1 / 2 / 2;
}

CSS Subgrid 示例

扩展阅读

如果你想要了解更多关于 CSS Grid 和 Subgrid 的信息，请阅读以下文章：

希望这个教程能帮助你更好地理解 CSS Subgrid！