本文详解如何在 css Grid 布局中为顶部行单独设置更大高度（如 100px），而其余行保持固定较小高度（如 25px），核心在于灵活组合 grid-template-rows 的显式值与 repeat() 函数。
本文详解如何在 css grid 布局中为顶部行单独设置更大高度（如 100px），而其余行保持固定较小高度（如 25px），核心在于灵活组合 `grid-template-rows` 的显式值与 `repeat()` 函数。
在使用 CSS Grid 构建类表格布局（尤其是 grid-auto-flow: column 的垂直表结构）时，常需突出表头行——例如让第一行（列标题行）显著高于数据行。此时，不能依赖 grid-row 或 height 等元素级样式，因为 Grid 的行高由容器的 grid-template-rows 统一定义；单个子元素无法直接“拉伸”所在行——它只能占据已分配的轨道空间。
正确做法是：在网格容器上，用 grid-template-rows 显式声明每行高度。你原使用的 repeat(4, 25px) 表示“4 行，每行 25px”，这属于均匀分布。要实现“首行 100px，后三行各 25px”，只需将其重构为：
.grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr)); grid-template-rows: 100px repeat(3, 25px); /* ✅ 关键修改 */ border-top: 1px solid black; border-right: 1px solid black; }✅ 这里 100px repeat(3, 25px) 等价于 100px 25px 25px 25px，共定义 4 条行轨道，完美匹配你的 4 列数据结构（name/city/dob + 隐式空单元格）。repeat() 只是语法糖，允许你混合使用字面值与重复模式，大幅提升可读性与可维护性。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- .top 类中定义的 grid-template-rows 无效：该样式作用于 元素，而 grid-template-rows 是仅对网格容器生效的属性，对子项设置将被忽略；
- 确保 HTML 结构中总单元格数能被列数整除（本例为 4 列 × 4 行 = 16 个 ），否则末尾可能产生空行或错位；
- 若后续需适配更多数据行，只需调整 repeat() 的第一个参数（如 repeat(10, 25px)），首行仍保持独立控制。
? 进阶提示：如需响应式首行高度（如移动端缩小），可结合 CSS 自定义属性与 clamp()：
.grid { --header-height: clamp(48px, 8vw, 100px); grid-template-rows: var(--header-height) repeat(3, 25px); }综上，通过精准声明 grid-template-rows: