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，内容多时可扩展。
实际布局中的配合使用
在一个网格容器中，同时设置列和行可以构建二维布局结构。
仿虎嗅网在线视频教育门户源码2.0
下载
仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。
立即学习“前端免费学习笔记（深入）”；
例如创建一个3列2行的响应式布局：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
gap: 10px;
}
这样会生成一个三列等宽、两行固定高度的网格，项目将按先行后列的顺序填充。
基本上就这些。合理使用 fr、repeat 和 minmax 能大幅提升布局灵活性和响应性。
