CSS 网格彻底改变了网页布局的结构。 然而，一个常见的挑战仍然存在：将父网格项内的嵌套项（孙子元素）与主网格线对齐。
通过引入 CSS Subgrid（CSS 网格布局的规范更新）解决了这个问题。本文介绍了 CSS Subgrid 的基础知识以及如何将其应用于卡片列表等常见布局问题。
1.什么是CSS子网格？
传统上，只有网格容器的直接子级可以沿着定义的网格轨道定位。当您在网格项内声明另一个网格时，该嵌套网格与外部父网格完全隔离。
考虑标准的“产品卡”布局：
- 每张卡片都包含图像、标题和说明。
- 标题的长度各不相同，有些跨越多行。
使用传统的 CSS 网格，在卡片之间水平对齐卡片标题或卡片描述需要固定高度、魔术边距或 JavaScript 重新计算。
子网格 通过让嵌套网格容器继承父容器中定义的列和/或行轨道，链接它们的结构对齐来解决这个问题。
2.实用指南：将卡片高度与子网格对齐
让我们实现一个响应式网格，其中嵌套的卡片元素动态对齐其内容块。
HTML结构
<div class="grid-container">
<!-- Card 1 -->
<div class="card">
<img src="thumb1.jpg" alt="Thumbnail">
<h3>Short Title</h3>
<p>A brief description goes here.</p>
</div>
<!-- Card 2 -->
<div class="card">
<img src="thumb2.jpg" alt="Thumbnail">
<h3>This is a very long title spanning multiple lines</h3>
<p>A longer description to showcase how the heights align.</p>
</div>
</div>
CSS 实现
/* Parent Container Grid */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
/* Card Styling integrating Subgrid */
.card {
display: grid;
/* Card spans 3 rows in the parent grid */
grid-row: span 3;
/* Configure fallback values */
grid-template-rows: auto auto 1fr;
row-gap: 10px;
}
/* Apply Subgrid when supported */
@supports (grid-template-rows: subgrid) {
.card {
grid-template-rows: subgrid;
}
}
代码如何运作
- 通过指定
grid-row: span 3;，我们指示每张卡恰好占据父容器网格的三行。 grid-template-rows: subgrid;声明继承父网格的行定义。- 即使卡 2 的标头换行为三行并展开，卡 1 的标头也会自动匹配该高度，因为两个标题共享父标题的相同虚拟行轨道。
3.摘要：带有子网格的现代布局
CSS Subgrid 得到所有主要现代浏览器（Chrome、Edge、Firefox、Safari）的完全支持。它消除了对脆弱的 JavaScript 高度匹配器的需求，并允许设计人员构建像素完美、灵活的网格布局。在产品网格、仪表板小部件和杂志布局中使用它来提升您的前端 UI 设计。