必须先设display: grid，否则grid-template-columns无效；推荐用repeat()替代重复值，结合minmax()与auto-fit实现响应式列数自动调整。
直接写grid-template-columns前必须设display: grid
不加这句，grid-template-columns完全无效——浏览器根本不会把它当网格处理，所有子元素还是按普通文档流排列。这是最常被跳过的一步，尤其从 Flex 切换过来时容易忽略。
常见错误现象：grid-template-columns: 1fr 2fr写了但列没分开，元素堆在一行左对齐；检查 computed styles 会发现 display 仍是 block 或 inline。
- 必须显式声明：
display: grid（不能靠继承，不能靠父级是 grid 就默认生效） - 如果要用 gap，也得在同一个容器上设，
gap不会继承，也不支持 margin 模拟 - IE 不支持 Grid，如需兼容，
display: -ms-grid+-ms-grid-columns是另一套语法，不能混用
用repeat()避免手写重复值
写 grid-template-columns: 1fr 1fr 1fr 1fr 不仅啰嗦，还容易数错。用 repeat(4, 1fr) 更安全，语义也更清晰：4 列，每列均分剩余空间。
实际使用中，repeat() 支持混合单位和函数嵌套，比如：
立即学习“前端免费学习笔记（深入）”；
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
这行代码的意思是：“尽可能多放宽度 ≥250px 的列，每列最多占 1fr”，它比写死列数更能适应不同屏幕宽度。
-
repeat(3, 200px)→ 固定 3 列，每列 200px -
repeat(2, 1fr 2fr)→ 等价于1fr 2fr 1fr 2fr，适合交替宽窄列 -
repeat(auto-fit, ...)和auto-fill行为差异小但关键：前者会收缩空轨道，后者保留空位
别硬记fr、auto、minmax()的区别，看它们怎么抢空间
fr 不是像素，是“剩余可用空间的份数”。容器宽 600px，减去所有固定宽列（比如 100px）、gap 和边框后，剩下的才分给 fr 单位。
容易踩的坑：
-
1fr 1fr 1fr≠ 三等分容器总宽（如果存在gap: 20px，实际每列会略小于 1/3） -
auto是内容宽度，不是“自动伸缩”——图片或长文本会让列撑开，可能破坏整体结构 -
minmax(200px, 1fr)是安全带：列宽至少 200px，但不超过它应得的fr份额；单独写1fr没这个下限保护
响应式切换列数别只靠媒体查询重写整条grid-template-columns
很多人一想到响应式，就写一堆 @media (max-width: 768px) { grid-template-columns: 1fr; }，但这样维护成本高，且容易漏掉中间断点。
更稳的做法是用 minmax() + repeat(auto-fit) 组合，让列数随容器宽度自然增减：
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
这段代码在桌面端可能铺满 3 列，在平板上变成 2 列，小屏上自动收为 1 列——无需任何媒体查询。
注意点：
- 只要子项内容不破坏最小宽度（比如超长无空格字符串），这个模式就很可靠
- 如果需要严格控制最大列数（例如最多 4 列），可改用
repeat(4, minmax(300px, 1fr))，再配合overflow-x: auto处理溢出 - 命名网格线（如
[main-start] 1fr [main-end]）在复杂布局里能大幅降低grid-column定位出错概率，但简单布局不必强求
真正卡住人的往往不是语法记不住，而是没意识到 grid-template-columns 的计算依赖于容器剩余空间——它不孤立存在，而是在 display: grid 启动后，和 gap、子项 min-width、甚至 scrollbar 宽度动态博弈的结果。
