Grid是新手最稳的布局选择，因其天然支持等高、单行定义列结构、gap控制间距不塌陷，无需清浮动或额外补丁；移动端须用媒体查询改grid-template-columns为1fr实现单列，避免混用float等旧方法。
直接用 display: grid，别碰 float 或手动 calc() —— 新手踩坑最多的地方，就是试图用老方法解决现代布局问题。
为什么 grid 是新手最稳的选择
Grid 天然支持等高、单行定义列结构、gap 控制间距不塌陷，不需要清浮动、不用管子项 DOM 顺序、也不用写一堆 min-height 或 align-items 补丁。你只要写一行 grid-template-columns，三栏就齐了，且默认所有列高度一致。
-
grid-template-columns: 1fr 2fr 1fr→ 左右各占 1 份，中间占 2 份，随容器缩放 -
grid-template-columns: 200px 1fr 200px→ 左右定宽，中间自适应（适合侧边栏场景） - 所有子元素自动等高，哪怕某列内容只有
<p>Hi</p>，它也会和旁边三段文字的列一样高 - 全局加
* { box-sizing: border-box; }，否则 padding 会撑破列宽
移动端必须切单列，不是可选项
小屏下三栏横向挤在一起，用户得左右拖拽才能看完，体验直接归零。必须用媒体查询强制单列，而且不能用 display: block 覆盖，那会破坏 Grid 上下文。
- 在
@media (max-width: 768px)里只改grid-template-columns: 1fr - 别写
flex-direction: column或float: none—— 它们不属于 Grid 容器的控制逻辑 - 如果主内容要 SEO 优先，加
.main { order: -1; }，Grid 里生效，Flexbox 里也生效
容易被忽略的盒模型和 gap 陷阱
几乎所有“列错位”“宽度不准”“间隙消失”的问题，都出在这两处。
立即学习“前端免费学习笔记（深入）”；
- 没统一
box-sizing：比如width: 33.33%+padding: 10px= 实际超 100%，列就换行或溢出 - 误用
margin替代gap：margin 会塌陷、受父容器影响大；gap是 Grid/Flex 原生属性，稳定可靠 - 在 Grid 容器里又给子项加
float或display: inline-block—— 布局逻辑混用，结果不可预测 - 文字过长不换行？不是改容器，是给子元素加
word-break: break-word
真正卡住新手的，往往不是语法不会写，而是没意识到：Grid 的列宽计算、高度同步、断点切换，是一整套连贯逻辑，中间插一个 float 或 margin，整个链条就断了。
