CSS Grid的子网格（Subgrid）：跨层级对齐与复杂仪表盘布局实现 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，我们开始今天的讲座。

CSS Grid的子网格（Subgrid）：跨层级对齐与复杂仪表盘布局实现

今天我们来深入探讨CSS Grid布局中的一个强大特性：子网格（Subgrid）。子网格允许我们跨越多个层级的DOM结构，将内部元素与外部Grid容器的网格线对齐，从而实现更加复杂和精确的布局。特别是在构建仪表盘、复杂表单和需要统一对齐的模块化组件时，子网格能显著提升代码的可维护性和布局的灵活性。

1. 子网格的引入与基本概念

在传统的CSS Grid布局中，Grid容器的直接子元素会参与到网格系统的布局中。如果这些子元素本身也是Grid容器，它们会创建新的独立的网格上下文，与父容器的网格没有任何关系。这在很多情况下限制了布局的灵活性，尤其是在需要跨越多个层级对齐元素时。

子网格的出现正是为了解决这个问题。通过将一个Grid容器的grid-template-columns和/或grid-template-rows属性设置为subgrid，该容器的网格轨道（tracks）会继承其父Grid容器的网格轨道。这意味着子网格内的元素可以像直接位于父Grid容器中一样进行定位和对齐。

2. 子网格的语法与使用

子网格的关键属性是grid-template-columns: subgrid和grid-template-rows: subgrid。此外，还可以使用grid-template-columns: subgrid <track-list>和grid-template-rows: subgrid <track-list>来指定子网格的轨道列表。<track-list>可以是repeat()函数、长度单位、百分比等，用于进一步控制子网格的轨道大小。

以下是一个简单的示例：

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

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 定义父网格的列 */
  grid-template-rows: auto auto; /* 定义父网格的行 */
  gap: 10px; /* 设置网格间隙 */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

.subgrid-container {
  display: grid;
  grid-template-columns: subgrid; /* 子网格继承父网格的列 */
  /* grid-template-rows: subgrid;  如果需要，也可以继承父网格的行 */
  gap: 5px; /* 设置子网格间隙 */
}

.subgrid-item {
  background-color: #e0e0e0;
  padding: 5px;
  border: 1px solid #aaa;
}

在这个例子中，.subgrid-container的grid-template-columns被设置为subgrid，它会继承.grid-container的列定义。这意味着.subgrid-item元素会与.grid-container的列对齐，即使它们位于不同的DOM层级中。

3. 使用 grid-template-columns: subgrid <track-list> 自定义子网格轨道

虽然 subgrid 关键字使得子网格能够继承父网格的轨道，但有时我们可能需要更精细的控制。grid-template-columns: subgrid <track-list> 允许我们在继承父网格轨道的同时，添加或覆盖特定的轨道定义。

例如：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 父网格定义 */
  grid-gap: 10px;
}

.subgrid-container {
  display: grid;
  grid-template-columns: subgrid 1fr; /* 继承父网格，并在末尾添加一个额外的1fr轨道 */
  grid-gap: 5px;
}

在这个例子中，子网格会继承父网格的三个列轨道 (1fr, 2fr, 1fr)，并在末尾添加一个额外的 1fr 列轨道。这使得子网格总共有四个列轨道，而父网格仍然保持三个轨道。

4. 子网格与 grid-column 和 grid-row

子网格的强大之处在于它允许我们使用 grid-column 和 grid-row 属性，像操作父网格的直接子元素一样操作子网格中的元素。

例如：

<div class="grid-container">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">
    <div class="subgrid-container">
      <div class="subgrid-item itemA">Item A</div>
      <div class="subgrid-item itemB">Item B</div>
    </div>
  </div>
  <div class="grid-item item3">Item 3</div>
  <div class="grid-item item4">Item 4</div>
</div>

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

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

.subgrid-container {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格的列 */
  gap: 5px;
}

.subgrid-item {
  background-color: #e0e0e0;
  padding: 5px;
  border: 1px solid #aaa;
}

.itemA {
  grid-column: 1 / 3; /* itemA占据父网格的第一列到第三列（跨越两列）*/
}

在这个例子中，.itemA 元素位于 .subgrid-container 中，但我们使用 grid-column: 1 / 3 将其定位到父网格的第一列到第三列。这意味着 .itemA 元素会跨越 .grid-container 的两列。

5. 子网格在仪表盘布局中的应用

仪表盘通常需要复杂的布局，其中多个组件需要精确对齐。子网格在这种场景下非常有用。

假设我们有一个仪表盘，包含标题、图表和数据表格。我们可以使用子网格来确保这些组件在不同的部分都能够统一对齐。

<div class="dashboard">
  <header class="dashboard-header">
    <h1>Dashboard Title</h1>
  </header>
  <main class="dashboard-main">
    <div class="chart-container">
      <h2>Chart</h2>
      <!-- Chart Content -->
    </div>
    <div class="table-container">
      <h2>Data Table</h2>
      <!-- Table Content -->
      <table>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
          </tr>
          <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
  <footer class="dashboard-footer">
    <p>&copy; 2023 My Dashboard</p>
  </footer>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* 定义仪表盘的列 */
  grid-template-rows: auto 1fr auto; /* 定义仪表盘的行 */
  grid-gap: 20px;
  height: 100vh; /* 占据整个视口高度 */
}

.dashboard-header {
  grid-column: 1 / 4; /* 跨越所有列 */
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

.dashboard-main {
  grid-column: 1 / 4; /* 跨越所有列 */
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格的列 */
  grid-gap: 20px;
}

.chart-container {
  grid-column: 2; /* 位于中间列 */
  background-color: #e0e0e0;
  padding: 20px;
}

.table-container {
  grid-column: 1 / 4; /* 跨越所有列 */
  background-color: #d0d0d0;
  padding: 20px;
}

.dashboard-footer {
  grid-column: 1 / 4; /* 跨越所有列 */
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f0f0f0;
}

在这个例子中，.dashboard 是一个Grid容器，它定义了仪表盘的基本布局。.dashboard-main 也是一个Grid容器，但它使用 grid-template-columns: subgrid 继承了 .dashboard 的列定义。这意味着 .chart-container 和 .table-container 可以像直接位于 .dashboard 中一样进行定位。

通过这种方式，我们可以确保图表和数据表格在不同的部分都能够与仪表盘的整体布局对齐，即使它们位于不同的DOM层级中。

6. 子网格处理复杂表单布局

表单布局也是子网格的另一个实用场景。它可以帮助我们创建对齐的表单字段，即使这些字段位于不同的分组或容器中。

<form class="form-container">
  <fieldset class="form-group">
    <legend>Personal Information</legend>
    <div class="form-row">
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" name="firstName">
    </div>
    <div class="form-row">
      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" name="lastName">
    </div>
  </fieldset>

  <fieldset class="form-group">
    <legend>Contact Information</legend>
    <div class="form-row">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div class="form-row">
      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone">
    </div>
  </fieldset>
</form>

.form-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 定义表单的列 */
  grid-gap: 10px;
  padding: 20px;
}

.form-group {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格的列 */
  grid-gap: 5px;
  margin-bottom: 5px;
}

label {
  grid-column: 1; /* 位于第一列 */
  text-align: right;
  padding-right: 5px;
}

input {
  grid-column: 2; /* 位于第二列 */
  width: 100%;
  padding: 5px;
}

在这个例子中，.form-container 是一个Grid容器，它定义了表单的基本列布局。.form-row 也是一个Grid容器，但它使用 grid-template-columns: subgrid 继承了 .form-container 的列定义。这确保了所有表单字段的标签和输入框都能够精确对齐，即使它们位于不同的 fieldset 元素中。

7. 浏览器兼容性与注意事项

虽然子网格是一个非常有用的特性，但需要注意的是，它的浏览器兼容性相对较新。截至目前，主流浏览器（Chrome, Firefox, Safari, Edge）都已经支持子网格，但是旧版本的浏览器可能不支持。

在使用子网格时，建议进行浏览器兼容性测试，并提供适当的降级方案，例如使用传统的Flexbox布局或Grid布局来替代。

此外，子网格可能会增加布局的复杂性，因此在使用时需要仔细考虑，确保它能够真正简化布局并提高代码的可维护性。

8. 代码示例：复杂的仪表盘布局

让我们来看一个更复杂的仪表盘布局示例，它演示了如何使用子网格来创建灵活和可维护的布局。

<div class="dashboard">
  <header class="dashboard-header">
    <h1>Advanced Dashboard</h1>
  </header>
  <main class="dashboard-main">
    <div class="section section-1">
      <h2>Section 1</h2>
      <div class="widget widget-1">Widget 1</div>
      <div class="widget widget-2">Widget 2</div>
    </div>
    <div class="section section-2">
      <h2>Section 2</h2>
      <div class="widget widget-3">Widget 3</div>
      <div class="widget widget-4">Widget 4</div>
      <div class="widget widget-5">Widget 5</div>
    </div>
    <div class="section section-3">
      <h2>Section 3</h2>
      <div class="widget widget-6">Widget 6</div>
    </div>
  </main>
  <footer class="dashboard-footer">
    <p>&copy; 2023 Advanced Dashboard</p>
  </footer>
</div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6列等宽轨道 */
  grid-template-rows: auto 1fr auto;
  grid-gap: 20px;
  height: 100vh;
}

.dashboard-header {
  grid-column: 1 / 7;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

.dashboard-main {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格的列 */
  grid-gap: 20px;
}

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

.section-1 {
  grid-column: 1 / 3; /* 占据前两列 */
}

.section-2 {
  grid-column: 3 / 6; /* 占据中间三列 */
}

.section-3 {
  grid-column: 6 / 7; /* 占据最后一列 */
}

.widget {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #aaa;
  margin-bottom: 10px;
}

.dashboard-footer {
  grid-column: 1 / 7;
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
}

在这个例子中，.dashboard 定义了一个包含6列的网格。.dashboard-main 使用子网格继承了这些列。然后，.section 元素使用 grid-column 属性来定位到不同的列范围。这样，我们可以灵活地控制每个section占据的列数，而无需修改 .dashboard 的基本布局。

表格：子网格属性总结

属性	值	描述
`grid-template-columns`	`subgrid` \| `subgrid <track-list>`	将Grid容器的列轨道设置为子网格。`subgrid` 表示继承父网格的列轨道。`subgrid <track-list>` 表示继承父网格的列轨道，并可以添加或覆盖特定的轨道定义。`<track-list>` 可以是`repeat()`函数、长度单位、百分比等。
`grid-template-rows`	`subgrid` \| `subgrid <track-list>`	将Grid容器的行轨道设置为子网格。`subgrid` 表示继承父网格的行轨道。`subgrid <track-list>` 表示继承父网格的行轨道，并可以添加或覆盖特定的轨道定义。`<track-list>` 可以是`repeat()`函数、长度单位、百分比等。
`grid-column`	`<start-line> / <end-line>` \| `<start-line> / span <value>`	指定Grid元素在列方向上的起始和结束网格线。在子网格中，这些网格线是相对于父Grid容器的网格线。`<start-line>` 和 `<end-line>` 可以是网格线的索引，也可以是网格区域的名称。`span <value>` 表示元素跨越的网格轨道数。
`grid-row`	`<start-line> / <end-line>` \| `<start-line> / span <value>`	指定Grid元素在行方向上的起始和结束网格线。在子网格中，这些网格线是相对于父Grid容器的网格线。`<start-line>` 和 `<end-line>` 可以是网格线的索引，也可以是网格区域的名称。`span <value>` 表示元素跨越的网格轨道数。

关键点回顾

子网格通过继承父网格的轨道，实现了跨层级元素的对齐。这在创建复杂布局，如仪表盘和表单时，能简化代码并提升可维护性。合理利用grid-template-columns: subgrid <track-list> 和 grid-column、grid-row 属性，能够充分发挥子网格的优势。

更易维护，布局更灵活

子网格为复杂布局提供了一种更结构化和可维护的方法，特别是在需要跨越多个层级对齐元素时。它能够简化代码，提高布局的灵活性，并使开发人员能够创建更精美的用户界面。

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

发表回复 取消回复

发表回复取消回复