用 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，使文字溢出破坏布局。
立即学习“前端免费学习笔记（深入）”；
