Grid布局如何定义行与列？

在CSS Grid布局中，`grid-template-rows`和`grid-template-columns`是构建响应式、灵活网格结构的基石——它们通过像素、fr弹性单位、百分比、auto及repeat()、minmax()等强大语法，精准控制每行高度与每列宽度，并支持命名网格线提升可维护性；无论你是想实现等分布局、内容自适应、断点响应式网格，还是复杂多维界面，掌握这两大属性就等于握住了Grid布局的“骨架钥匙”，让网页设计真正从“摆位置”升级为“定义空间逻辑”。

在CSS Grid布局中，grid-template-rows 和 grid-template-columns 是定义网格结构的核心属性。它们用来设置网格的行高和列宽，决定网格容器内轨道（track）的数量与尺寸。

grid-template-columns 定义列宽

该属性用于指定网格容器中每一列的宽度。你可以通过空格分隔的方式定义多个列的尺寸。

• 固定单位：如像素值 grid-template-columns: 100px 200px 150px; 表示创建三列，宽度分别为100px、200px、150px。
• 弹性单位 (fr)：fr代表“fraction”，即可用空间的一部分。例如 grid-template-columns: 1fr 2fr; 表示两列，第二列是第一列的两倍宽。
• 百分比：如 grid-template-columns: 25% 75%; 按容器百分比分配列宽。
• auto 关键字：表示根据内容自动调整列宽，如 grid-template-columns: auto 1fr;。
• repeat() 函数：简化重复模式的写法。例如 grid-template-columns: repeat(3, 1fr) 等同于 1fr 1fr 1fr。
• 混合使用：可组合不同单位，如 grid-template-columns: 100px 1fr 2fr;。

grid-template-rows 定义行高

这个属性控制网格中每一行的高度，语法与 columns 基本一致。

• 固定高度：如 grid-template-rows: 60px 100px; 创建两行，高度分别为60px和100px。
• 使用 fr 单位：grid-template-rows: 1fr 3fr; 表示第二行占剩余空间的四分之三。
• auto 与 min-content/max-content：可根据内容动态调整行高，如 grid-template-rows: auto min-content;。
• 结合 grid-auto-rows：当行数超过定义时，未明确设定的行会使用 grid-auto-rows 的值作为默认高度。

实用技巧与注意事项

合理使用这些属性能让布局更灵活、响应式更强。

• fr 单位只分配剩余空间，已有固定尺寸的部分不会被计入。
• 避免所有列都设为固定值且总和超出容器宽度，可能导致溢出或缩放异常。
• 使用 minmax() 可限制列或行的最小最大尺寸，如 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 实现响应式网格。
• 命名网格线可在定义模板时添加括号实现，增强可读性，例如：grid-template-columns: [start] 1fr [middle] 1fr [end];

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~