CSS subgrid 怎样让嵌套卡片共享父级网格

嵌套卡片要共享父级网格，可把卡片本身设为网格容器，并在需要共享的轴上声明 subgrid。例如让每张卡片跨越父网格的三个行轨道，再设置 grid-template-rows: subgrid，就能让同一组卡片的标题、说明和操作区域使用同一套行尺寸。

只有 display: grid 还不够。卡片必须先是父网格中的网格项，跨越足够的父级轨道，再在对应方向使用 subgrid。

规范地址：https://www.w3.org/TR/css-grid-2/。我的选择是先保留清楚的卡片语义结构，再用行 subgrid 改善内容对齐，避免给标题写固定高度。下面是原创示例代码与结构说明，没有本地浏览器运行记录。

先把要对齐的内容拆成三个区域

以两张课程卡片为例：一张标题短，另一张标题可能换行。目标是让标题区域、说明区域、链接区域分别对齐，而不仅仅是让卡片外框等高。我会先让每张卡片都拥有三个直接子元素；区域数量相同，布局约定才容易维护。

文件处理
    
学习读取、编码和归档的基本方法。
    了解文件课程
  
面向团队的接口设计与错误处理
    
围绕请求结构、错误分类以及调用方约定组织接口。
    了解接口课程
  

链接路径是项目内示例，需要替换成实际课程地址。article 保留内容分组，标题仍然属于卡片，不必为了共享布局把标题、段落和链接全部提升到外层。普通嵌套网格会各自计算内部轨道；subgrid 的价值就是在保留这一层结构的同时参与父级轨道尺寸计算。

给卡片设置跨行范围和 subgrid

下面这段 CSS 包含基础布局与增强规则，可与上面的 HTML 配合使用。基础布局采用单列卡片，较宽时变成两列；支持行 subgrid 的浏览器再启用共享行轨道。

/* 基础布局：浏览器未应用增强规则时仍能阅读 */
.course-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.course-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #b9c5ce;
  border-radius: 0.75rem;
}
.course-card > * {
  /* 去掉默认外边距，让间距由网格控制 */
  margin: 0;
  overflow-wrap: anywhere;
}
.course-card > a {
  align-self: start;
}
@media (min-width: 48rem) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@supports (grid-template-rows: subgrid) {
  .course-card {
    /* 每张卡片占据父级三行，并共享这三个行轨道 */
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: normal;
  }
  .course-card > h2 { grid-row: 1; }
  .course-card > p { grid-row: 2; }
  .course-card > a { grid-row: 3; }
}

grid-row: span 3 是卡片在父网格中的放置范围；grid-template-rows: subgrid 是卡片内部行轨道的来源，两者承担不同职责。内部元素使用的行号从子网格自身的起点计数。这里仅共享行，列仍由卡片自己建立；不用把两个方向都改成 subgrid。

用父级轨道处理不同长度的内容

在宽屏两列布局中，自动放置到同一组三行的两张卡片共享标题行、说明行和链接行。较长标题可以贡献到对应父级行的尺寸，另一张卡片的说明因此也从同一条行边界开始。这个规则推导不等于文字基线自动一致；字体、行高和对齐属性仍然影响区域内部文字的位置。

本例没有给父级行设置固定高度，让内容自然参与尺寸计算。卡片换到下一组父级行时，会形成另一组共享范围，不会让整个列表的所有标题都统一成全局最大高度。窄屏单列时，每张卡片占自己的三行，也就没有相邻卡片需要横向对齐。

subgrid 的 gap 默认可以采用父网格相应方向的间距。本例明确使用 row-gap: normal 保持共享行间距关系；如果自行覆盖成不同间距，内部边缘表现也会改变。卡片 padding 和 border 仍然存在，不能理解成使用 subgrid 后盒模型失效。

保留普通网格作为兼容布局

增强规则放在 @supports 内，避免不支持该值的环境只留下跨三行放置。我的取舍是让旧环境显示普通嵌套网格：卡片内容可读、链接可用，按钮区域可以在卡片内部组织，但不承诺标题和说明跨卡片完全对齐。

MDN 将 subgrid 列为广泛可用的特性，但旧浏览器和嵌入式 WebView 仍应依据项目支持范围处理。@supports 判断语法支持，不代替对目标环境的实际布局判断；也没有必要仅为几行标题对齐就默认加入脚本测量高度。

处理新增字段与换行后的边界

如果卡片新增价格或标签，应先决定它属于现有区域还是独立轨道。例如标签可以包进标题区域，继续保持三个直接子区域；若它应独立对齐，就需要同步修改父级跨行数量和子元素放置。不要只添加第四个直接子元素，却仍假设三个共享行会自动扩展成四行。

子网格在共享方向受所跨轨道范围约束，不会像独立网格那样任意创建额外隐式轨道解决内容放置。内容缺失时，也应保留区域约定或显式指定放置，避免自动放置改变区域含义。

只写 grid-template-columns: subgrid 能对齐按钮吗？

不能由此推导出按钮纵向对齐。列共享控制列轨道；本文的标题、说明和操作是行方向问题。

所有卡片必须共享全部父网格吗？

不用。每张卡片只使用自己跨越的父级轨道，范围由卡片在父网格中的位置和跨度决定。

需要去掉 article 包装吗？

不需要。保留卡片包装正是嵌套子网格的用途之一；同时保持 DOM 阅读顺序，避免仅靠视觉重排改变内容含义。

技术依据：W3C CSS Grid Level 2 规范与MDN Subgrid 指南。