display: grid 是最省事稳定的起点，设 grid-template-columns: 200px 1fr 240px 即可实现三栏布局，1fr 表示剩余空间均分，无需 calc() 或百分比；应避免 float 和 inline-block，因其易导致塌陷、空白间隙及语义顺序失效；间距统一用 gap，移动端须通过媒体查询设为 1fr 并慎用 display: none 隐藏非关键栏。
display: grid 是目前最省事、最稳的起点，不用算百分比、不担心塌陷、天然等高，写一行 grid-template-columns 就能跑起来。
用 grid-template-columns 定义三栏结构
直接在容器上设 display: grid，再用 grid-template-columns 描述列宽：
比如左栏固定 200px、中间自适应、右栏固定 240px，就写：grid-template-columns: 200px 1fr 240px。1fr 不是百分比，而是“把剩余空间切成 1 份”，和 flex: 1 行为一致。
别写 width: 100% 或 calc() 去手动减，那是给老浏览器兜底用的，现代项目里纯属多此一举。
为什么别碰 float 和 inline-block
这两个方案现在基本等于埋坑：
• float 元素脱离文档流，父容器高度塌陷是常态，必须额外加 overflow: hidden 或伪元素清除——全是 hack，不是解法
• inline-block 标签换行会产生看不见的空白间隙，得硬把宽度从 80% 缩成 79%，稍一改就错位
• 两者都不支持语义化 DOM 顺序（比如主内容写在 HTML 最后，但视觉要放中间），order 属性在它们身上完全无效
• 响应式切换时，float 要重写整套 margin 和清除逻辑，inline-block 得手动调 vertical-align 和 font-size: 0 去消缝
gap 比 margin 更可靠
列间间距统一用 gap: 12px，别给子项单独加 margin：
• margin 在 Grid/Flex 里会干扰空间分配，还可能触发 margin collapse
• gap 是布局层原生控制，不会影响子项盒模型，也不会被 box-sizing 干扰
• IE11 不支持 gap，真要兼容就用 grid-column-gap + grid-row-gap 替代，但优先考虑是否真需要保 IE11
移动端必须显式切单列
小屏下三栏横向挤成一条线，用户得左右滑动才能看全，这不是响应式，是反用户体验：
• 必须在 @media (max-width: 768px) 里重写 grid-template-columns: 1fr
• 别指望 grid 自动折行，它默认只按定义列数排，不会像 flex-wrap: wrap 那样换行
• 如果某栏要隐藏（比如右栏在小屏不重要），直接 display: none，别靠 width: 0 或 visibility: hidden，后者仍占格
真正容易被忽略的是盒模型统一和布局上下文隔离：全局加 * { box-sizing: border-box; }，别在 Grid 容器里给子项加 float 或 position: absolute——它们会直接退出布局流，调试时连元素都找不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
