最简单可靠的方式是 display: grid + grid-template-columns: repeat(4, 1fr)；float 易塌陷需清浮，flex 默认不换行易溢出，grid 天然二维、自动换行、等宽计算由浏览器完成，语义清晰且响应式更简洁。
直接说结论：用 display: grid + grid-template-columns: repeat(4, 1fr) 是最简单、最可靠的方式，比 float 或 flex 更少出错，且天然支持响应式断点调整。
为什么不用 float 或 flex 做四栏等宽？
float 容易塌陷，需要手动清浮，clearfix 写错就白干；flex 虽然能用 flex: 1 实现等宽，但默认不换行，小屏下会横向溢出——你得额外加 flex-wrap: wrap 和媒体查询控制子项数量，逻辑变重。
而 grid 天然二维、自动换行（配合 auto-fit）、等宽计算由浏览器完成，新手写错概率低。
- float 方案中，
margin和width计算稍有偏差就会挤掉一栏 - flex 方案里，
flex-basis和min-width混用容易互相覆盖，导致桌面端四栏、移动端变成三栏甚至两栏 - grid 的
repeat(4, 1fr)明确表达“我要四等份”，语义清晰，调试直观
基础四栏 grid 布局怎么写？
HTML 结构保持极简，不需要额外 wrapper 或 class 层级：
<div class="grid-4"> <div>栏目一</div> <div>栏目二</div> <div>栏目三</div> <div>栏目四</div> </div>
CSS 只需三行核心代码：
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
-
1fr表示每栏均分剩余空间，不是像素值，不随屏幕缩放失效 -
gap替代了传统 margin 手动计算，避免父子 margin 合并问题 - 所有子
<div> 默认自动填入网格，无需单独设 <code>grid-column如何让四栏在小屏变成两栏或单栏？
别写死
repeat(4, 1fr)，改用repeat(auto-fit, minmax(280px, 1fr)))—— 这是真正让 grid “响应”的关键。含义是：“每栏最小 280px，最大尽可能均分；当放不下四栏时，自动减少列数”。
- 桌面屏（≥1120px）：四栏并排（4 × 280px = 1120px）
- 平板屏（768–1119px）：自动变为两栏（每栏约 380px）
- 手机屏（
- 注意：280px 是经验值，若内容含长标题或图片，可调高到 320px
容易被忽略的兼容性与细节
IE11 不支持
auto-fit，但支持repeat(4, 1fr)；如果你必须兼容 IE11，就放弃自动列数变化，改用媒体查询硬切：@media (max-width: 768px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }另外两个坑：
- 父容器没设
width: 100%或被其他样式（如float）影响，grid 容器可能收缩成窄条 - 子元素内有
display: block的图片没设max-width: 100%，会导致整栏宽度被撑破
实际项目里，真正卡住新手的往往不是 grid 语法本身，而是父容器约束缺失和图片尺寸失控——先检查这两处，比反复调
grid属性更有效。
