grid-template-columns和grid-template-rows用于定义网格的列宽和行高。前者设置列的宽度，支持固定单位、fr弹性单位、repeat()重复函数和minmax()最小最大值函数，如repeat(3, 1fr)创建三等分列；后者设置行的高度，用法类似，如grid-template-rows: 100px 200px定义两行固定高度。两者结合可构建二维布局，如.container设为display: grid后，配合gap实现响应式网格。使用fr、repeat和minmax能提升布局灵活性。
在CSS中使用网格布局时，grid-template-columns 和 grid-template-rows 是定义网格结构的核心属性。它们用来设置网格的列宽和行高，控制整体布局的划分方式。
grid-template-columns：定义列的宽度
该属性用于指定网格容器中每一列的宽度。可以使用固定单位（如px）、相对单位（如fr、%）或函数（如minmax()、repeat()）来设置。
常见用法示例：固定宽度列： grid-template-columns: 100px 200px 100px; —— 创建三列，宽度分别为100px、200px、100px。 等分弹性列（fr单位）： grid-template-columns: 1fr 2fr; —— 第二列是第一列的两倍宽，总空间按比例分配。 重复模式（repeat函数）： grid-template-columns: repeat(3, 1fr); —— 创建三个等宽的列。 混合单位： grid-template-columns: 100px 1fr 2fr; —— 第一列为固定宽度，其余按比例分配剩余空间。 最小最大值（minmax）： grid-template-columns: repeat(4, minmax(100px, 1fr)); —— 每列至少100px，最多占满可用空间。
grid-template-rows：定义行的高度
与列类似，该属性设置网格中每一行的高度。使用方式和单位基本一致。
使用示例：固定高度行： grid-template-rows: 50px 100px; —— 创建两行，高度分别为50px和100px。 弹性行高： grid-template-rows: 1fr 2fr; —— 第二行高度是第一行的两倍。 自适应内容高度： grid-template-rows: auto 1fr; —— 第一行根据内容自动调整，第二行填满剩余空间。 结合minmax限制行高： grid-template-rows: minmax(60px, auto) 1fr; —— 第一行最小60px，内容多时可扩展。
实际布局中的配合使用
在一个网格容器中，同时设置列和行可以构建二维布局结构。
启科网络PHP商城系统
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
0 查看详情
立即学习“前端免费学习笔记（深入）”；
例如创建一个3列2行的响应式布局：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 200px; gap: 10px;}
这样会生成一个三列等宽、两行固定高度的网格，项目将按先行后列的顺序填充。
基本上就这些。合理使用 fr、repeat 和 minmax 能大幅提升布局灵活性和响应性。
以上就是在css中布局网格模板列行设置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/988106.html
微信扫一扫 
支付宝扫一扫 
