CSS `Subgrid` 属性：嵌套网格布局的对齐与继承

各位观众，老铁们，大家好！今天咱就来唠唠CSS里一个有点意思，但又经常被大家忽视的家伙——subgrid。别看它名字里带个“sub”，就觉得它是个配角，其实用得好，能让你的网格布局更上一层楼，特别是在处理嵌套网格的时候。

一、啥是 Subgrid？听名字像个小弟，其实是个狠角色

首先，我们得搞清楚subgrid是干啥的。简单来说，subgrid允许一个网格容器（子网格）继承其父网格容器的行和列的定义。想象一下，你有一个大的网格布局，里面又嵌套了一些小的网格。如果不用subgrid，这些小的网格就得自己定义行和列，跟父网格对不齐，看起来就很乱。但用了subgrid，这些小的网格就像打了鸡血一样，直接对齐父网格的网格线，整齐划一，看着就舒服。

二、为什么要用 Subgrid？解决嵌套网格的对齐难题

你可能会问，我自己定义子网格的行和列不也行吗？干嘛非得用subgrid？问得好！但是，手动定义子网格的行和列，在实际开发中会遇到很多问题：

维护成本高： 如果父网格的行或列发生了变化，你还得手动去调整所有子网格的定义，简直就是噩梦。
容易出错： 人工计算和调整网格线的位置，很容易出错，导致子网格和父网格对不齐。
不够灵活： 当父网格的布局需要根据屏幕大小变化时，子网格的布局也需要跟着变化，手动调整就更麻烦了。

而subgrid就完美地解决了这些问题。它让子网格自动继承父网格的行和列，省时省力，还能保证布局的一致性和灵活性。

三、Subgrid 的基本用法：上手很容易，精通靠实践

subgrid的用法其实很简单，主要就是两个步骤：

将子网格容器的display属性设置为grid或inline-grid。
在子网格容器的grid-template-rows和/或grid-template-columns属性中，使用subgrid关键字。

让我们看个例子：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item nested-grid">
    <div class="nested-item">Nested Item 1</div>
    <div class="nested-item">Nested Item 2</div>
  </div>
  <div class="item">Item 5</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  border: 1px solid #ccc;
}

.nested-grid {
  display: grid; /* 关键步骤1：将子网格容器设置为grid */
  grid-column: 1 / 4; /* 占据父网格的所有列 */
  grid-row: 2; /* 占据父网格的第二行 */
  grid-template-columns: subgrid; /* 关键步骤2：继承父网格的列 */
  grid-template-rows: subgrid; /* 关键步骤2：继承父网格的行 */
  background-color: lightblue;
  gap: 5px;
}

.nested-item {
  background-color: lightgreen;
  padding: 10px;
  border: 1px solid green;
}

在这个例子中，.nested-grid就是一个子网格容器。我们将其display属性设置为grid，然后使用grid-template-columns: subgrid和grid-template-rows: subgrid来继承父网格的列和行。这样，.nested-grid中的.nested-item就会按照父网格的网格线进行排列，看起来非常整齐。

四、Subgrid 的高级用法：灵活运用，打造复杂布局

除了基本用法之外，subgrid还有一些高级用法，可以让我们更灵活地控制子网格的布局：

只继承行或列： 你可以只继承行或列，而自己定义另一方向的网格线。例如，你可以使用grid-template-columns: subgrid; grid-template-rows: 50px 50px;来继承父网格的列，但自己定义子网格的行。
命名网格线： 如果父网格定义了命名的网格线，子网格也可以使用这些名称来定位元素。例如：

.container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.nested-grid {
  display: grid;
  grid-column: 1 / 4;
  grid-row: 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.nested-item {
  grid-column: col-start / col-mid; /* 使用父网格的命名网格线 */
  grid-row: 1;
}

跨越多个网格轨道： 子网格可以跨越父网格的多个网格轨道。例如，你可以使用grid-column: 1 / span 2;来让子网格跨越父网格的前两列。

五、Subgrid 的兼容性：还是个小年轻，需要关爱

虽然subgrid很强大，但它的兼容性并不算很好。截至目前（2023年末），主流浏览器对subgrid的支持情况如下：

浏览器	支持情况
Chrome	完全支持
Firefox	完全支持
Safari	部分支持 (需要加 `-webkit-` 前缀，且存在一些bug)
Edge	完全支持
Opera	完全支持
iOS Safari	部分支持 (需要加 `-webkit-` 前缀，且存在一些bug)
Android Browser	不支持

可以看出，Chrome、Firefox和Edge对subgrid的支持最好，Safari和iOS Safari部分支持，Android Browser完全不支持。因此，在使用subgrid时，需要考虑兼容性问题，并做好降级方案。

六、Subgrid 的实际应用：案例分析，加深理解

为了更好地理解subgrid的应用，我们来看几个实际的案例：

复杂的表单布局： 在表单中，经常需要将多个输入框和标签对齐。使用subgrid可以轻松地实现这种对齐，而不需要手动计算每个元素的位置。
响应式导航菜单： 在响应式导航菜单中，经常需要根据屏幕大小调整菜单项的排列方式。使用subgrid可以方便地实现这种调整，而不需要编写大量的媒体查询。
卡片式布局： 在卡片式布局中，经常需要在每张卡片中放置一些元素，并保持这些元素在所有卡片中的位置一致。使用subgrid可以轻松地实现这种一致性，而不需要为每张卡片单独定义布局。

案例1：复杂表单布局

<form class="form-container">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <label for="phone">电话：</label>
  <input type="tel" id="phone" name="phone">

  <button type="submit">提交</button>
</form>

.form-container {
  display: grid;
  grid-template-columns: 100px 1fr; /* 定义两列：标签列和输入框列 */
  grid-template-rows: auto auto auto auto; /* 定义四行：每行对应一个表单项 */
  gap: 10px;
  width: 400px;
  margin: 0 auto;
}

.form-container label {
  text-align: right;
  grid-column: 1; /* 标签占据第一列 */
}

.form-container input {
  grid-column: 2; /* 输入框占据第二列 */
  width: 100%;
}

.form-container button {
  grid-column: 1 / 3; /* 按钮占据两列 */
  justify-self: center; /* 按钮居中 */
}

这个例子没有用到subgrid，但是如果表单项很多，或者需要更复杂的对齐方式，就可以使用subgrid来简化布局。

案例2：嵌套的侧边栏和主内容区域

<div class="page-container">
  <aside class="sidebar">
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
      <li><a href="#">链接3</a></li>
    </ul>
  </aside>
  <main class="main-content">
    <h1>主内容标题</h1>
    <p>主内容段落...</p>
  </main>
</div>

.page-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 定义两列：侧边栏和主内容区域 */
  grid-template-rows: 1fr; /* 定义一行 */
  height: 500px;
}

.sidebar {
  background-color: #f0f0f0;
  padding: 20px;
}

.main-content {
  padding: 20px;
}

/*  假设需要在主内容区域内部使用subgrid来创建一个更细粒度的布局 */
.main-content {
  display: grid;  /* 将主内容区域也变成一个网格容器 */
  grid-template-columns: subgrid; /* 关键：使用subgrid继承page-container的列 */
  grid-template-rows: auto 1fr auto; /* 定义行 */

  /* 这部分代码要基于实际需求进行调整 */
  h1 {
    grid-column: 1 / span 2; /* 标题跨越两列 */
  }

  p {
    grid-column: 1 / span 2;  /* 段落跨越两列 */
  }
}

/* 为了演示，我们需要确保父网格有定义明确的列。 */
.page-container{
  grid-template-columns: 200px 1fr; /* 明确指定两列 */
}

在这个例子中，.page-container定义了页面的整体布局，包含一个侧边栏和一个主内容区域。.main-content内部也使用了grid布局，并且使用了subgrid来继承父网格的列定义。这样，.main-content内部的元素就可以按照父网格的列进行排列。

七、Subgrid 的优缺点：全面评估，理性选择

最后，我们来总结一下subgrid的优缺点：

优点：

简化嵌套网格的布局： 解决了嵌套网格对齐的难题，减少了手动计算和调整的工作量。
提高布局的一致性和灵活性： 保证了子网格和父网格的布局一致性，并能根据屏幕大小灵活调整布局。
提高代码的可维护性： 减少了重复的代码，使代码更易于阅读和维护。

缺点：

兼容性问题： 兼容性还不够好，需要考虑降级方案。
学习成本： 需要一定的学习成本，才能掌握subgrid的用法。
过度使用可能导致布局复杂化： 如果过度使用subgrid，可能会导致布局过于复杂，难以理解和维护。

八、总结：用好 Subgrid，布局更上一层楼

总的来说，subgrid是一个非常有用的CSS属性，可以简化嵌套网格的布局，提高布局的一致性和灵活性。但是，在使用subgrid时，需要考虑兼容性问题，并理性选择是否使用。希望今天的讲解能帮助大家更好地理解和使用subgrid，让你的网格布局更上一层楼！

今天的讲座就到这里，大家回去多多练习，熟能生巧！咱们下期再见！

发表回复 取消回复

发表回复取消回复