通过grid-template-columns和grid-template-rows定义网格行列，前者设置列宽如100px或fr比例，后者设置行高，可结合repeat函数与固定/弹性单位创建复杂布局。
在 CSS Grid 布局中，定义网格的行和列主要通过 grid-template-columns 和 grid-template-rows 属性来实现。它们用于明确指定网格容器中每一列的宽度和每一行的高度。
定义网格列（grid-template-columns）
使用 grid-template-columns 可以设置网格中各列的宽度。可以传入一个值列表，每个值对应一列的尺寸。
例如：-
grid-template-columns: 100px 200px 150px;— 创建三列，宽度分别为 100px、200px、150px。 -
grid-template-columns: 1fr 2fr;— 创建两列，按比例分配可用空间，第一列占1份，第二列占2份。 -
grid-template-columns: repeat(3, 1fr);— 快速创建三列，每列均分空间。
定义网格行（grid-template-rows）
grid-template-rows 用来设置每一行的高度，语法与列类似。
例如：-
grid-template-rows: 50px 100px;— 创建两行，高度分别为 50px 和 100px。 -
grid-template-rows: repeat(2, auto);— 创建两行，高度由内容自动决定。 -
grid-template-rows: 100px 1fr;— 第一行固定高度，第二行填充剩余空间。
结合使用行列定义
在一个网格容器中，同时设置行和列即可形成完整的网格结构。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 60px 1fr 50px;
}
这会创建一个 2 列 3 行的网格布局，常用于页面整体结构设计，如头部、主体、底部搭配侧边栏或主内容区。
基本上就这些，掌握这两个属性就能灵活控制网格的基本结构。
