Grid布局中模板行和模板列如何定义_grid-template-rows与columns详解

新闻中心 NEWS CENTER

2025-11-09

浏览次数：次

grid-template-rows和grid-template-columns定义网格行高列宽，使用像素、fr、百分比、auto等单位及repeat、minmax函数灵活布局，支持命名网格线，是构建CSS Grid布局的核心。

grid布局中模板行和模板列如何定义_grid-template-rows与columns详解

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

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

常见用法示例：

固定单位：如像素值 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;。

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

实际应用示例：

固定高度：如 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];

基本上就这些。掌握好 grid-template-rows 和 grid-template-columns，你就掌握了Grid布局的骨架搭建能力。

以上就是Grid布局中模板行和模板列如何定义_grid-template-rows与columns详解的详细内容，更多请关注其它相关文章！