grid-template-rows 不能自动分层标签与内容，需用 grid-row 显式定位或 display: contents 配合隐式网格线；商品卡片内设 grid-template-rows: max-content 1fr 并让 .product-tag 的 grid-row: 1，才能确保标签固定首行。
grid-template-rows 不能直接“分层”标签和内容
很多人以为用 grid-template-rows 给商品列表划几行，就能天然把“新品”“热销”这类标签和商品图、标题自动对齐到不同行——其实不行。CSS Grid 的行定义只管容器高度分配，不负责子元素语义分层。标签（比如 .tag）和商品主体（.product-card）默认仍是同级子项，Grid 不会因为你写了 grid-template-rows: 24px 1fr 就自动把所有 .tag 塞进第一行。
真正起作用的是子元素的 grid-row 或 grid-area 显式定位，或者靠 display: contents + 隐式网格线间接控制。
用 grid-row 定位标签到固定行位置
这是最可控、也最常被忽略的做法：让每个商品卡片内部形成一个微型 Grid，标签强制上浮到第一行，其余内容占满剩余空间。
关键点：
- 商品容器设为
display: grid，并用grid-template-rows: max-content 1fr - 标签元素加
grid-row: 1，确保它永远在首行 - 图片/标题等其他子元素不用指定行，由隐式轨道承接，自然落到第二行及之后
.product-card {
display: grid;
grid-template-rows: max-content 1fr;
gap: 8px;
}
<p>.product-tag {
grid-row: 1;
font-size: 12px;
background: #ff6b6b;
color: white;
padding: 2px 6px;
}</p><p>.product-image,
.product-title {
grid-row: 2; /<em> 可选：显式约束，避免意外撑高第一行 </em>/
}</p>
grid-template-rows 配合 repeat() 处理多行商品时的行高一致性
当商品列表整体用 Grid 布局（非单个卡片内嵌 Grid），grid-template-rows 通常配合 grid-auto-rows 使用，否则每行高度会被最长卡片拉伸，导致标签错位。
正确做法是放弃手动写死所有行高，改用自动行：
- 用
grid-template-rows: repeat(3, minmax(200px, auto)))控制最大列数，但实际行数由内容驱动 - 更稳妥的是只设列：
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))))，让 Grid 自动换行 - 标签对齐问题交给每个
.product-card内部的grid-row解决，而非外层容器的grid-template-rows
强行在外层用 grid-template-rows: 32px 1fr 1fr 等固定值，会导致商品高度不一致时标签悬浮或重叠——这恰恰是多数人调试半天没结果的根源。
用 display: contents 避免标签破坏网格流
如果标签是包裹在 <div class="product"> 外层的独立元素（比如 <code><span class="tag">新品</span><div class="product">...</div>），它会作为额外子项参与外层 Grid 排列，打乱商品顺序。
这时可对标签用 display: contents，让它“消失”于布局树中，但保留样式和可访问性：
.product-tag {
display: contents;
}
<p>/<em> 标签文字仍可见、可读，但不占网格轨道 </em>/
.product-tag::before {
content: "新品";
display: inline-block;
background: #4ecdc4;
color: #000;
padding: 2px 6px;
font-size: 12px;
}</p>
注意：display: contents 在旧版 Safari 中支持有限，如需兼容 iOS 15.4 以下，得回退到绝对定位或伪元素方案。
真正卡住人的从来不是 grid-template-rows 写得对不对，而是没想清楚“标签属于谁的布局上下文”——它该归商品卡片管，还是归整个列表管。绝大多数情况下，答案是前者。
