CSS网格布局设置行和列教程

CSS网格布局中列数与行数的精确控制并非凭肉眼判断或经验猜测，而是严格由`grid-template-columns`和`grid-template-rows`声明的轨道数量、以及`grid-template-areas`字符串定义的行列维度三者完全对齐所决定——写错一个空格、漏掉一个值、误用`auto-fit`与`auto-fill`，甚至区域名含非法字符，都可能导致整个网格失效而退化为普通文档流；本文直击开发者高频踩坑点，从`repeat()`防手误、`minmax()`计轨规则、空行高度归零原理，到`grid-auto-rows`补隐式行、`align-content`调多行对齐，再到`grid-template-areas`与行列声明的硬性匹配要求，层层拆解如何让网格真正“按你所想”稳定呈现。

grid-template-columns 怎么写才不“列数对不上”

列数不是靠肉眼数出来的，而是由 grid-template-columns 中的轨道定义个数决定的。比如写了 grid-template-columns: 1fr 2fr auto，那就一定是 3 列——不管子元素有几个、有没有跨列。

常见错误是把响应式断点里重复写 grid-template-columns 当成“改列数”，其实每次重写都覆盖了上一次，真正生效的只有最后匹配的那个规则。

• 用 repeat(3, 1fr) 比手写 1fr 1fr 1fr 更安全，避免空格或逗号漏写
• 如果某列要撑满剩余空间，别只写 1fr，得确认父容器有明确宽度（比如 width: 100% 或设为 inline-grid 的块级上下文）
• minmax(200px, 1fr) 这类函数会参与列数计算：它算作「1 条轨道」，不是两个

grid-template-rows 设置后为什么“看不见行高”

grid-template-rows 定义的是显式网格的行数，但内容没填满时，那些空行默认不可见——不是没生效，是高度为 0。

典型场景：你写了 grid-template-rows: 100px 1fr，但只放了一个子元素，默认它只占第一行，第二行存在但没内容，也不撑开高度。

• 加 grid-auto-rows: 100px 才能让后续隐式行也有高度（比如动态插入新元素时）
• 用 align-content: start / end / center 控制多行轨道在容器内的对齐，否则所有行会挤在顶部
• 调试时临时加 border: 1px solid red 到 grid 容器，能看清显式行的边界

auto-fit 和 auto-fill 在列数计算上差在哪

这两个关键字只出现在 repeat() 里，比如 repeat(auto-fit, minmax(200px, 1fr)))，它们影响的是「最终渲染出几列」，但原理完全不同。

错误理解是“auto-fit 更智能”，其实它只是更激进地合并空轨道：当剩余空间不够放下一个最小轨道时，auto-fit 会把那条轨道直接删掉；auto-fill 则保留空白轨道。

• 用 auto-fit 适合卡片列表，要尽量填满宽度、不留空列
• 用 auto-fill 适合需要预留位置的布局（比如拖拽区域），即使当前没内容也要占位
• 两者都不改变 grid-template-columns 声明本身的语法结构，只是运行时调整轨道数量

grid-template-areas 配合 rows/columns 时容易漏掉什么

当用 grid-template-areas 定义区域名时，grid-template-rows 和 grid-template-columns 的轨道数必须和字符串网格的行数、列数严格一致。少一行或多一列，整个声明就无效，浏览器会退回到默认单列流。

例如：grid-template-areas: "header header" "main sidebar" 是 2 行 × 2 列，那么 grid-template-rows 必须提供 2 个值（如 80px 1fr），grid-template-columns 也必须是 2 个（如 1fr 300px）。

• 字符串中每个单词是一个区域名，空格分隔列，换行分隔行——别用制表符或连续空格代替换行
• 区域名不能含短横线（-）或数字开头，否则解析失败，整条声明被忽略
• 用 . 表示空单元格，但它仍计入列数和行数，比如 "a . c" 是 1 行 × 3 列

实际写的时候，列数和行数不是靠猜，是看 grid-template-columns 轨道数、grid-template-rows 轨道数、grid-template-areas 字符串维度这三者是否咬死对齐。任意一处错位，网格就“塌”回普通文档流。

终于介绍完啦！小伙伴们，这篇关于《CSS网格布局设置行和列教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！