要实现三栏布局需显式声明grid-template-columns: 200px 1fr 200px，确保父容器有明确宽度、子元素未触发隐式网格线，并在旧safari中使用minmax(0,1fr)；单列是因grid默认不生成多列轨道，必须显式定义列结构。
直接写 grid-template-columns: 200px 1fr 200px 就能实现，但前提是父容器有明确宽度上下文、子元素没意外触发隐式网格线、且你没在 Safari 旧版本里漏掉 minmax(0, 1fr)。
为什么写了 display: grid 却还是单列？
Grid 默认不生成多列轨道，它只按文档流顺序把所有子元素塞进第一列。这不是 bug，是规范行为。
- 必须显式声明
grid-template-columns，比如200px 1fr 200px - 别混用
200px 100% 200px：百分比在 Grid 中按容器总宽计算，第二列会试图占满整个宽度，把左右栏挤出视口 - 如果用了
grid-column-start却没配grid-template-columns，Grid 不会自动推导列结构
auto 和 1fr 在中间列里到底该选谁？
二者行为完全不同，选错会导致中间栏塌缩或滚动条意外出现。
-
auto：基于内容最小宽度，允许收缩，适合中间是图标/短文字等固定尺寸内容的场景 -
1fr：强制占据剩余空间，哪怕中间为空也会撑开，更适合视觉上“填满”的需求 - 混合更灵活，例如
200px 1fr max-content—— 左右固定，中间弹性，右侧按内容自适应
常见失效原因和对应检查点
中间栏没撑开，90% 不是 CSS 写错了，而是布局上下文缺失。
- 父容器没设
width或max-width，又处于无约束文档流中（比如直接挂在body下），1fr就算不出来“剩余空间”是多少 - 中间内容含长 URL、未设
table-layout: fixed的<table>，会强行撑开自身，突破 <code>1fr约束 - 忘了加
box-sizing: border-box，而侧边栏带padding或border，Safari 和移动端会把它们当额外宽度，导致中间栏变窄甚至消失 - 嵌套场景下，三栏容器本身是某个 Flex 子项时，它的
width: 100%可能被父级flex-basis截断——这时候调grid参数没用，得查上层布局链
真正卡住的从来不是语法，而是宽度来源、盒模型边界、内容换行策略这三件事有没有对齐。少一个，就可能在 Safari 移动端或 Firefox 小屏下突然翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
