grid-template-rows和grid-template-columns定义网格行高列宽，使用像素、fr、百分比、auto等单位及repeat、minmax函数灵活布局，支持命名网格线，是构建CSS Grid布局的核心。
在CSS Grid布局中，grid-template-rows 和 grid-template-columns 是定义网格结构的核心属性。它们用来设置网格的行高和列宽，决定网格容器内轨道（track）的数量与尺寸。
grid-template-columns 定义列宽
该属性用于指定网格容器中每一列的宽度。你可以通过空格分隔的方式定义多个列的尺寸。
常见用法示例：-
固定单位：如像素值
grid-template-columns: 100px 200px 150px;表示创建三列，宽度分别为100px、200px、150px。 -
弹性单位 (fr)：fr代表“fraction”，即可用空间的一部分。例如
grid-template-columns: 1fr 2fr;表示两列，第二列是第一列的两倍宽。 -
百分比：如
grid-template-columns: 25% 75%;按容器百分比分配列宽。 -
auto 关键字：表示根据内容自动调整列宽，如
grid-template-columns: auto 1fr;。 -
repeat() 函数：简化重复模式的写法。例如
grid-template-columns: repeat(3, 1fr)等同于1fr 1fr 1fr。 -
混合使用：可组合不同单位，如
grid-template-columns: 100px 1fr 2fr;。
grid-template-rows 定义行高
这个属性控制网格中每一行的高度，语法与 columns 基本一致。
实际应用示例：
-
固定高度：如
grid-template-rows: 60px 100px;创建两行，高度分别为60px和100px。 -
使用 fr 单位：
grid-template-rows: 1fr 3fr;表示第二行占剩余空间的四分之三。 -
auto 与 min-content/max-content：可根据内容动态调整行高，如
grid-template-rows: auto min-content;。 -
结合 grid-auto-rows：当行数超过定义时，未明确设定的行会使用
grid-auto-rows的值作为默认高度。
实用技巧与注意事项
合理使用这些属性能让布局更灵活、响应式更强。
- fr 单位只分配剩余空间，已有固定尺寸的部分不会被计入。
- 避免所有列都设为固定值且总和超出容器宽度，可能导致溢出或缩放异常。
- 使用
minmax()可限制列或行的最小最大尺寸，如grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))实现响应式网格。 - 命名网格线可在定义模板时添加括号实现，增强可读性，例如：
grid-template-columns: [start] 1fr [middle] 1fr [end];
