grid-template-columns 是定义网格列结构的核心属性，必须显式设置才能生成列线；其值用空格分隔，支持像素、百分比、fr单位及混合写法，可配合 repeat() 简化重复结构，并需注意与 grid-template-rows 同时定义、避免 fr 与 auto 混用等关键细节。
grid-template-columns 是定义网格列结构的核心属性，必须显式设置才能让 Grid 真正“画出列线”——只写 display: grid 不会自动分列，所有子元素默认堆在左上角第一格里。
明确列数与宽度单位
它的值是一组用空格分隔的尺寸声明，每个值对应一列的宽度：
-
固定像素：如
200px 100px 300px→ 定义三列，宽度分别为 200px、100px、300px -
百分比：如
30% 40% 30%→ 三列按比例分配容器宽度（总和建议为 100%，否则可能溢出或留白） -
fr 单位：如
1fr 2fr 1fr→ 四等分剩余空间，第二列占两份，其余各占一份 -
混合使用：如
200px 1fr minmax(250px, 1fr)→ 第一列固定 200px，第二列均分剩余空间，第三列最小 250px、最大不超过剩余空间的 1fr
用 repeat() 简化重复结构
避免手写多个相同值，repeat() 函数大幅提升可读性和维护性：
-
repeat(4, 1fr)→ 等宽四列，每列占剩余空间的 1/4 -
repeat(3, 200px 50px)→ 生成六列：200px、50px、200px、50px、200px、50px -
repeat(auto-fit, minmax(250px, 1fr)))→ 响应式核心写法：每项至少 250px，容器够宽就多列，不够则自动换行，空轨道被折叠
注意语法细节与常见陷阱
看似简单，但几个关键点容易导致布局失效：
- grid-template-columns 和 grid-template-rows 必须**同时显式定义**（至少其中之一），否则网格线不存在，
grid-column或grid-area定位全部无效 - 不要混用
fr和auto（如1fr auto），auto会撑满剩余空间，破坏 fr 的比例逻辑 - 如果用了
grid-template-areas，其每行单词数量必须严格等于grid-template-columns定义的列数，否则整个区域模板被浏览器静默丢弃 - IE 完全不识别该属性，需确认兼容性要求；现代浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）均原生支持
实际搭配 gap 与项目定位
列结构定好后，通常还需配合其他属性让布局更可控：
- 用
gap: 12px统一控制列间距和行间距，比给子项加 margin 更可靠（避免塌陷和末行额外空白） - 子项可通过
grid-column: 2 / 4跨列，或grid-area: "header"配合grid-template-areas实现语义化区域布局 - 若某列需自适应内容宽度，可用
fit-content(300px)：最大不超过 300px，小内容则收缩
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
