grid-template-rows和grid-template-columns用于定义网格行列的大小与分布。1. grid-template-columns设置列宽，支持fr、px、%、auto及minmax()等单位，可实现等宽列、固定加弹性布局或响应式列。2. grid-template-rows控制行高，用法类似，适用于均分高度、固定头尾加自适应主体等场景。3. 二者结合可创建二维网格，如三列两行布局，配合fr、repeat()、minmax()等提升灵活性。4. 推荐显式定义行列以增强控制，结合auto-fit实现响应式设计。掌握单位选择与响应式细节是关键。
在CSS中使用Grid布局时，grid-template-rows 和 grid-template-columns 是定义网格行和列的核心属性。它们决定了网格容器中轨道（track）的数量、大小和分布。
grid-template-columns：定义列的宽度
该属性用于设置网格容器中每一列的宽度。你可以用固定单位（如px）、相对单位（如fr、%）或自动分配（auto）来定义。
常见用法示例：-
等宽三列布局：
grid-template-columns: 1fr 1fr 1fr; -
两列，一列固定200px，另一列占剩余空间：
grid-template-columns: 200px 1fr; -
响应式四列，每列至少100px，多余空间平均分配：
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows：定义行的高度
这个属性控制网格中每一行的高度。与列类似，可以使用多种单位灵活设置。
实际应用举例：-
两行均分高度：
grid-template-rows: 1fr 1fr; -
头部固定80px，主体占满剩余空间：
grid-template-rows: 80px 1fr; -
三行，中间行自适应内容：
grid-template-rows: 100px auto 100px;
结合使用行列定义创建二维网格
将这两个属性一起使用，可以构建完整的网格结构。
立即学习“前端免费学习笔记（深入）”；
例如创建一个3列2行的布局：.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}
这样就形成了一个总宽分为三部分（中间列是两边的两倍），高为两行（第一行100px，第二行200px）的网格系统。
实用技巧与注意事项
- fr单位 表示“分数”，用于按比例分配可用空间。
-
repeat() 函数可简化重复定义，比如
repeat(4, 1fr)等同于写四次1fr。 - 未显式定义的行或列会自动创建（隐式网格），但建议明确设置以增强可控性。
-
移动端适配推荐结合
minmax()与auto-fit实现弹性列数。
基本上就这些。掌握 grid-template-rows 和 grid-template-columns 的用法，就能快速搭建出各种复杂的网页布局结构。不复杂但容易忽略的是单位选择和响应式处理细节。
