用 display: flex 最稳，父容器设 display: flex 并加 gap 控制间距，子元素设 flex: 1 实现四宫格等宽；display: grid 更灵活，用 grid-template-columns: repeat(4, 1fr) + gap 即可，支持跨列和响应式断点。
用 display: flex 最稳，四宫格自动均分宽度
直接给父 div 加 display: flex，子 div 默认水平排列，加 flex: 1 就能等宽。不用算百分比，也不怕内容撑开。
常见错误是只写 display: flex 却忘了设子元素的伸缩行为，结果四个 div 挤成一团或宽度不均。
- 父
div必须加display: flex，推荐同时加gap: 8px控制间距（比margin更干净） - 每个子
div加flex: 1，等价于flex: 1 1 0，强制忽略自身宽度，均分剩余空间 - 如果子
div内容高度不一，加align-items: stretch（flex 默认值，通常不用显式写）保证拉齐 - IE11 对
flex: 1支持有 bug，若需兼容，改用flex: 1 1 auto或固定flex-basis
用 display: grid 更灵活，适合响应式或不规则布局
Grid 天然适合“四宫格”场景，一行四列只要两行 CSS：父容器设 display: grid，再用 grid-template-columns: repeat(4, 1fr)。
比 Flex 更适合后续加断点——比如小屏时改成两列，只需一条 @media 规则，不用动 HTML 结构。
立即学习“前端免费学习笔记（深入）”；
-
repeat(4, 1fr)表示 4 个等宽轨道；想留间隙？直接加gap: 12px，不用在子元素上折腾margin - 如果某一个子
div需要跨两列，加grid-column: span 2，Flex 得额外包一层 - 注意旧版 Safari（1fr 在嵌套 Grid 中有渲染异常，可临时用
minmax(0, 1fr)替代 - Grid 不受子元素 HTML 顺序限制，重排靠
grid-area或order，但日常四宫格基本用不到
别碰 float 和 inline-block，维护成本高还容易塌陷
现在还用 float: left + width: 25% 的写法，等于主动给自己埋坑：父容器高度塌陷、间隙难控制、响应式要重写整套逻辑。
inline-block 看似简单，但子 div 间换行符会转成空格，导致实际宽度超 100%，必须删 HTML 空格或设 font-size: 0，后续调字体又得重设，纯属负优化。
- 所有现代浏览器都支持 Flex 和 Grid，无兼容理由硬扛
float - 如果项目里已有大量
float布局，优先局部替换，别为了统一强行重构整个页面 - 真遇到必须用
inline-block的遗留系统（比如某些 CMS 模板），至少把子div写在同一行，避免空格干扰
宽高比不对？检查子 div 是否有默认 margin 或 padding
四个 div 看起来没填满父容器，或者上下错位，八成是子元素自带 margin（比如 h1、p 标签）或父容器有 padding 干扰了计算。
Flex/Grid 只管分配可用空间，不会帮你抵消默认样式。尤其用 rem 或 em 设宽时，根字体大小一变，整个布局就飘。
- 快速排查：浏览器开发者工具里选中子
div，看 computed 样式里的margin和padding是否非零 - 通用清零方案：父
div加display: flex后，子元素加margin: 0；或全局用* { margin: 0; padding: 0; box-sizing: border-box; } - 如果子
div里放图片，记得设img { display: block; }，否则底部会有空白间隙
事情说清了就结束。真正麻烦的从来不是“怎么放四个 div”，而是后面加背景、加动画、加点击态时，哪一层该设 overflow，哪个 z-index 该提级——那些才是卡住人的地方。
