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 基本一致。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 实际应用示例：固定高度：如 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详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/979561.html
微信扫一扫 
支付宝扫一扫 
