用 display: grid 替代浮动布局可避免多层嵌套和 clearfix 等易错写法，配合 gap 属性统一控制间距，三栏等宽仅需 grid-template-columns: repeat(3, 1fr)，响应式只需一行媒体查询。
用 display: grid 替代浮动和多层嵌套
浮动布局（float）加 clearfix、配合 margin 手动调列宽，是老式多栏最易出错的源头。现在浏览器对 grid 支持已全覆盖（Chrome 66+、Firefox 63+、Safari 16.4+），没必要再写一堆 hack。
常见错误：用 grid-template-columns: repeat(3, 1fr) 后发现内容溢出容器——其实是没设 grid-auto-rows: minmax(min-content, auto) 或漏了 overflow-wrap: break-word。
实操建议：
- 三栏等宽直接写
grid-template-columns: repeat(3, 1fr)，比写三个width: 33.33%+float: left少 8 行代码 - 响应式变化只需改一行：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 避免用
grid-column-start/grid-column-end手动定位，除非真需要跨列；多数场景用grid-area命名区域更直观
用 display: flex 处理单行多栏或工具条
Flex 比 Grid 更轻量，适合导航栏、按钮组、标签页这类「一维」排列。但很多人误用 flex-wrap: wrap 搞多行栅格，结果在小屏下换行错乱——因为没设 min-width 控制子项最小尺寸。
典型问题：按钮组在移动端挤成一列，但文字被截断，不是因为 flex 不行，而是忘了给子元素加 white-space: nowrap 或 overflow: hidden。
实操建议：
- 水平居中多栏用
justify-content: space-between，比写margin-left: auto+margin-right: auto直观 - 等宽子项统一设
flex: 1，别用width: 25%——后者在 flex 容器里会被覆盖 - 需要自动折行时，必须同时设
flex-wrap: wrap和子项flex-basis: 200px（而非width），否则换行逻辑不可控
别手写 calc() 算边距，用 gap 统一控制间距
以前写多栏总要算：width: calc(33.33% - 20px)，再配 margin-right: 10px，稍一改列数就得重算。现在 gap 是 Grid 和 Flex 的原生属性，浏览器自动处理留白，不侵占子项宽度。
容易踩的坑：gap 在旧版 Safari（row-gap + column-gap 分开写。
实操建议：
- Grid 布局优先用
gap: 16px，它会同时作用于行列间隙，不用再写margin-bottom模拟行距 - Flex 布局中，
gap只控制主轴间距（如水平排列时的左右空隙），交叉轴（上下）需靠align-items或子项margin调整 - 不要和
padding混用：如果容器已有padding，gap是额外增加的，不是替代
.columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
这 3 行代码能替代过去 15 行浮动 + 媒体查询 + clearfix 的写法。真正难的不是语法，是忘记清除旧习惯——比如还在用 box-sizing: border-box 配合 padding 模拟间隙，其实 gap 才是语义上“栏目之间距离”的正确表达。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
