移动端三栏布局不能直接用1fr 1fr 1fr，需配合断点控制列数：小屏单列（1fr），≥768px双列，≥1024px三列，并注意Safari兼容、gap回退及父容器布局影响。
移动端三栏布局不能直接用 1fr 1fr 1fr —— 小屏上会把内容压得看不清，必须配合断点控制列数，否则“三栏”只是名义上的。
为什么 grid-template-columns: 1fr 1fr 1fr 在手机上会出问题
它确实等分了容器宽度，但没考虑内容可读性：文字被挤成一行多换行、按钮变窄、图片变形。这不是 Grid 失效，而是你把“技术可行”当成了“体验合理”。1fr 只管空间分配，不管内容是否适合展示。
- 移动端默认应为单列（
1fr），这是阅读习惯和触控安全区决定的 - 三栏只在 ≥768px（平板横屏或桌面）才真正有意义
- 如果硬写三列，又没设
min-width或minmax()，Grid 会照常分，但子项内容可能溢出或强制换行
正确响应式写法：从单列起步，用 @media 逐步加列
别想着“一套代码适配所有”，移动端优先意味着先写小屏，再向上增强。用媒体查询明确切换时机，比依赖 auto-fit 更可控。
- 基础样式设为单列：
grid-template-columns: 1fr - 平板起始（≥768px）切两列：
@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 桌面起始（≥1024px）切三列：
@media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); } - 统一用
gap控制间距，避免子项自己加margin破坏网格流
左右固定 + 中间自适应？别在移动端用 200px 1fr 200px
这种写法在手机上毫无意义：左右 200px 已占满大部分屏幕，中间几乎没空间。它只适用于桌面端有足够宽度的场景。
立即学习“前端免费学习笔记（深入）”；
- 若真需侧边栏（如导航/广告），应在小屏下隐藏或收进汉堡菜单，而不是强行保留三栏结构
- 想让某栏“最小宽度但可收缩”，用
minmax(200px, max-content)比200px更灵活，但注意max-content可能撑破容器 - 移动端更推荐用
grid-template-areas配合@media重排区域顺序，比如把"sidebar main aside"改成"main"，语义清晰且易维护
容易被忽略的兼容与渲染细节
不是写了 display: grid 就万事大吉。几个实际开发中卡住过人的点：
- Safari iOS 15.4 以下不支持
gap，得补grid-column-gap和grid-row-gap - 子项里有
table或长单词（如 URL），可能触发隐式行生成，加grid-auto-flow: column防错位 - 父容器若处于 Flex 子项中，
width: 100%可能被flex-basis截断，此时 Grid 容器实际宽度不足，1fr分不到空间——得查上层布局链，不是 Grid 本身的问题 -
fr单位对空内容也生效，中间栏即使没内容也会占满剩余空间；如果希望“有内容才显示”，得用auto+min-width: 0配合overflow: hidden控制
