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

grid-template-rows和grid-template-columns定义网格行高列宽，使用像素、fr、百分比、auto等单位及repeat、minmax函数灵活布局，支持命名网格线，是构建CSS 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 基本一致。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

• 固定高度：如 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布局中模板行和模板列如何定义_grid-template-rows与columns详解的详细内容，更多请关注php中文网其它相关文章！