MODERN CSS
子网格Subgrid
嵌套的网格可以继承父网格的轨道，让跨卡片的内容真正对齐。解决「卡片内元素对不齐」这个困扰多年的老问题。
效果预览
1设计稿还原已完成前端组
2接口联调进行中后端组
3灰度发布待开始运维组
适合用在哪
卡片列表里让标题、描述、按钮跨卡片对齐；表单里让标签列宽度一致；杂志式排版的跨栏对齐。
容易踩的坑
- 子项没有横跨对应行数，subgrid 拿不到父轨道，跨卡对齐完全不生效。
- 父网格行轨道用固定高度，某张卡标题变长时内容溢出而非整行撑高。
- 在 subgrid 上重新声明 gap 却忘了它会继承父级 gap，间距翻倍或错乱。
设计提示词 · Prompt
子网格（Subgrid）：父网格设 display:grid; grid-template-columns:repeat(3,1fr)；子项（卡片）设 display:grid; grid-template-columns:subgrid（行方向用 grid-template-rows:subgrid），并让它横跨父网格的多列（grid-column:span 1）。这样卡片内部的每个元素会落在与父网格相同的列线上，跨卡片天然对齐。要点：Chrome 117+、Safari 16+、Firefox 71+ 支持，条件允许时用 @supports (grid-template-columns:subgrid) 做渐进增强，不支持时降级为普通流式布局（元素会各自算宽度，但仍可用）。
Subgrid: the parent grid sets display:grid; grid-template-columns:repeat(3,1fr); child items (cards) set display:grid; grid-template-columns:subgrid (use grid-template-rows:subgrid for the row direction) and span multiple tracks of the parent grid (grid-column:span 1). Each element inside a card then lands on the same lines as the parent grid, aligning naturally across cards. Key points: supported in Chrome 117+, Safari 16+, Firefox 71+; where possible use @supports (grid-template-columns:subgrid) for progressive enhancement, falling back to a normal flow layout when unsupported (elements size themselves independently but remain usable).
常见搭配
同一页面里经常和「子网格」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="mc-sg">
<div class="mc-sg__r"><i>1</i><b>设计稿还原</b><em>已完成</em><span>前端组</span></div>
<div class="mc-sg__r"><i>2</i><b>接口联调</b><em>进行中</em><span>后端组</span></div>
<div class="mc-sg__r"><i>3</i><b>灰度发布</b><em>待开始</em><span>运维组</span></div>
</div>
</div>