介绍
在卡片布局中跨列对齐嵌套组件是响应式网页设计中常见的布局挑战。
虽然 CSS Grid 和 Flexbox 可以轻松均衡同级卡片容器的高度，但对齐内部元素（例如标题、正文和 CTA 按钮）仍然很困难。如果一张卡片具有多行标题，而另一张卡片具有单行标题，则以下元素将错位，从而导致 UI 不一致。
CSS 网格子网格 功能解决了此布局限制。本指南解释了 subgrid 的工作原理并分享了构建对齐网格卡的样式策略。
1. 嵌套 CSS 网格的局限性
让我们看看在不使用 subgrid 参数的情况下对齐嵌套元素的限制。
HTML结构
<div class="grid-container">
<div class="card">
<h3 class="card-title">Short Title</h3>
<p class="card-desc">Short description text.</p>
<button class="card-btn">Read More</button>
</div>
<div class="card">
<h3 class="card-title">Extremely Long and Complex Multi-line Card Title</h3>
<p class="card-desc">This card contains long body copy that wraps across multiple lines.</p>
<button class="card-btn">Read More</button>
</div>
</div>
传统的 Flexbox/Grid 解决方法
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between; /* Pushes button to bottom */
}
- 问题： 卡片容器本身对齐到相同的高度，并且按钮位于底部。但是，标题的下边缘和描述段落的开头没有对齐。由于一个标题较长，因此其下方的描述文本开始位置低于相邻卡片中的描述，从而破坏了布局一致性。
2. 解决子网格的对齐问题
使用 subgrid，嵌套网格容器继承在其父网格容器上定义的行和列轨道。
这意味着同级卡元素可以共享相同的网格轨道定义。所有卡片上的标题共享一个网格行，描述文本块共享另一个网格行，将它们完美对齐。
子网格 CSS 实现
/* 1. Define the grid tracks, including nested rows, on the parent container */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* The parent container handles rows dynamically */
gap: 20px;
}
/* 2. Configure the card to inherit parent row alignments using subgrid */
.card {
display: grid;
/* Tell the card to inherit parent row definitions */
grid-template-rows: subgrid;
/* Instruct the card to span 3 rows defined on the parent grid */
grid-row: span 3;
gap: 10px;
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
}
/* 3. Assign internal items to specific rows */
.card-title {
grid-row: 1; /* Row 1 */
}
.card-desc {
grid-row: 2; /* Row 2 */
}
.card-btn {
grid-row: 3; /* Row 3 */
}
为什么这有效
设置 grid-template-rows: subgrid 指示每个 .card 将其内部元素直接与父网格容器的行对齐。
第 1 行（标题行）的高度自动扩展以适合该行中最高的卡片标题。这可确保第 2 行中的描述以完全相同的垂直对齐方式开始，无论标题长度如何。
3. 水平列对齐示例
您还可以水平应用 subgrid 来对齐列轨道。
例如，在构建表单时，即使标签的文本长度不同，您也可以跨多行对齐标签和输入字段。
.form-row {
display: grid;
grid-template-columns: subgrid; /* Inherits the parent grid column proportions */
grid-column: span 2;
}
这会将所有输入字段水平跨行对齐，而无需您定义标签元素的硬编码宽度。
结论和浏览器支持
CSS 网格 subgrid 完全支持所有现代浏览器，包括 Safari、Firefox、Chrome 和 Edge。
实现 subgrid 消除了基于 JavaScript 的高度匹配和复杂的 Flexbox 边距的需要。
在布局中使用 subgrid 来对齐嵌套组件并提高卡片设计的一致性。