用 display: grid 实现三栏等宽最简洁：容器设 display: grid 和 grid-template-columns: 1fr 1fr 1fr，加 gap 即可；fr 单位仅在 grid 容器生效，子项设 width 或 flex 属性会干扰布局。
用 display: grid 实现三栏等宽自适应最简洁
直接在容器上设置 display: grid 和 grid-template-columns: 1fr 1fr 1fr，三栏就自动等分宽度且随容器缩放。如果想留间隙，加 gap: 16px 即可，不用额外处理 margin 冲突。
常见错误是给子项设了 width 或 flex 相关属性，反而干扰 grid 的列分配逻辑；另外 fr 单位只在 grid 容器内生效，写在子元素上无效。
- 要让中间栏固定宽度（比如 600px），两边自适应：用
grid-template-columns: 1fr 600px 1fr - 响应式时想在小屏变单栏：加媒体查询
@media (max-width: 768px) { grid-template-columns: 1fr; } - 注意旧版 Safari 对
gap支持不全，如需兼容 iOS 15.4 以下，可用grid-column-gap回退
用 display: flex 实现三栏需手动控制子项行为
Flex 更灵活但步骤略多：父容器设 display: flex，每个子项默认会横向排列，但必须明确指定尺寸或伸缩行为，否则可能撑开容器或坍缩。
典型陷阱是忘了设 flex-shrink: 0，导致内容多的栏被压缩；或者没设 min-width: 0，使文字溢出破坏布局。
立即学习“前端免费学习笔记（深入）”；
- 等宽三栏：子项统一设
flex: 1（等价于flex: 1 1 0%） - 左侧固定 200px，右侧固定 160px，中间自适应：左栏
flex: 0 0 200px，中栏flex: 1，右栏flex: 0 0 160px - 如果子项内有长单词或 URL，务必加
word-break: break-word和min-width: 0防止 flex 布局崩溃
哪些场景该选 grid 而不是 flex
当三栏之间存在行列对齐、跨栏、重排序或响应式断点频繁变化时，grid 是更自然的选择。例如后台管理页的「侧边栏 + 主内容 + 右工具栏」，需要独立控制每栏高度、间距和堆叠顺序。
Flex 更适合一维布局（纯行或纯列），强行用 flex 做三栏并控制高度一致，得靠 align-items: stretch 和一堆 hack，而 grid 天然支持 align-content 和 justify-content 管控行列对齐。
- 需要让某栏横跨三列（如 banner）：grid 用
grid-column: 1 / -1一行搞定；flex 得抽出来单独处理 - 想让中栏在小屏时移到顶部：grid 用
order或grid-row重排；flex 的order只能改变视觉顺序，语义结构不变 - Grid 的
auto-fit+minmax()可实现“尽可能多列，最小不小于 300px”，flex 没有等效机制
移动端适配时最容易忽略的细节
三栏在手机上几乎从不并排显示，但很多人只写了桌面端样式，忘了加 @media 或用了错误的断点值。真正的临界点不是“768px”，而是内容是否还能清晰阅读——通常 480px 左右就要切单栏。
另一个盲区是触摸目标大小：grid-gap 或 gap 设太小（比如 4px），手指点不准；建议最小交互间距保持 8px 以上。
- 别只依赖
max-width媒体查询，配合prefers-reduced-motion减少动画干扰 - 用
min-width: fit-content配合width: min(100%, 1200px)控制最大宽度，比单纯设max-width更稳妥 - 测试时真机打开 devtools 的 device toolbar 不够，一定要在 Safari 和 Chrome for iOS 上实测滚动和点击
