使用CSS Grid布局可通过grid-template-columns和grid-template-rows定义行列结构。1. 设置display: grid启用网格；2. 用fr单位实现比例分配，如1fr:2fr:1fr创建三列布局；3. 定义多行高度适用于头部、主体、底部结构，侧边栏可跨行显示；4. repeat(3, 1fr)简化等分布局，支持混合写法；5. 结合gap、网格线编号提升灵活性，轻松构建响应式页面。
使用CSS Grid布局可以轻松实现多行多列的页面结构。通过grid-template-rows和grid-template-columns属性，你可以精确控制网格中每一行和每一列的尺寸与数量。下面结合实际案例说明如何使用这两个属性构建灵活的布局。
基本Grid容器设置
要启用Grid布局，先为父容器设置display: grid，然后定义行列结构。
.container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: 50px 100px;
}
上面代码创建了一个3列2行的网格：
- 第一列宽100px，第二列200px，第三列占据剩余空间（1fr）
- 第一行高50px，第二行100px
使用fr单位创建响应式列布局
fr单位表示“可用空间的份数”，适合创建等分或比例列。
立即学习“前端免费学习笔记（深入）”；
.grid-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
grid-gap: 10px;
}
这种布局常用于内容区：左侧导航、中间主内容、右侧边栏。随着容器宽度变化，各列自动按比例伸缩。
定义多行高度并放置元素
除了列，你也可以明确控制每行的高度，尤其适用于固定头部或底部的布局。
.dashboard {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 50px;
height: 100vh;
}
.header { grid-row: 1; }
.sidebar { grid-row: 1 / 4; } /* 跨越三行 */
.main-content { grid-row: 2; }
.footer { grid-row: 3; }
这个例子构建了一个典型的后台布局：
- 两列：侧边栏200px，主内容占剩余宽度
- 三行：头部60px，主体自适应，底部50px
- 侧边栏通过
grid-row: 1 / 4从第1行延伸到第4行前（即跨3行）
结合repeat()函数简化重复定义
当有多组相同宽度的列或高度的行时，repeat()函数能大幅简化代码。
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
gap: 10px;
}
这会生成一个3列2行的相册布局，每列等宽，每行高150px。如果希望某些列不同，还可以混合使用：
grid-template-columns: 50px repeat(3, 1fr) 50px;
表示左右各50px的边框列，中间3列平分剩余空间。
基本上就这些。掌握grid-template-rows和grid-template-columns后，配合fr、repeat()和网格线编号，就能高效构建复杂且响应式的多行多列布局。不复杂但容易忽略的是单位选择和范围跨越的写法，多练几次就能熟练运用。
