用 display: grid 最直接分四块，需设 grid-template-columns: 1fr 1fr 和 grid-template-rows: 1fr 1fr（或简写为 grid: 1fr 1fr / 1fr 1fr），确保两行两列；子元素少于4个时空格仍保留，是预期行为。
用 display: grid 最直接分四块
浏览器原生支持，不用写额外逻辑，也不依赖 JS。关键在设置 grid-template-columns 和 grid-template-rows，让容器产生 2×2 的网格结构。
常见错误是只设列或只设行，结果只分出两块；或者用了 repeat(4, 1fr) 得到一排四列，不是“四块”而是“四条”。要四块（即两行两列），得明确控制行列数。
- 推荐写法：
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; - 等价简写：
grid: 1fr 1fr / 1fr 1fr;（注意斜杠前是行，后是列） - 如果子元素少于 4 个，空格仍会保留——这是预期行为，不是 bug
- 不加
gap时块会紧贴；加gap: 8px可避免边框重叠
float 或 inline-block 分四块容易错在哪
老方法能跑，但对齐、换行、垂直居中都得手动调，稍不留神就塌陷或错位。尤其当内容高度不一致时，float 容器常不包裹子元素，inline-block 默认有空白间隙。
-
float: left必须给父容器加overflow: hidden或伪元素清除浮动，否则高度塌陷 -
inline-block元素间换行符会被渲染成空格，导致宽度超 100%；解决方式要么删换行、要么设父元素font-size: 0再单独设子元素字号 - 两者都不响应式友好：百分比宽度在小屏下可能溢出，而
grid可配合minmax()或媒体查询轻松调整
Flexbox 能不能分四块？可以，但别硬套
Flexbox 本质是一维布局，强行分四块需嵌套：外层 flex-direction: column 分两行，每行内再用 flex-direction: row 分两列。结构变深，维护成本上升。
立即学习“前端免费学习笔记（深入）”；
- 单层 flex 永远只能线性排列——
flex-wrap: wrap配width: 50%看似可行，但第 3 个子项会换行，且无法保证严格 2×2（比如只有 3 个子项时，最后一行只剩一块） - 嵌套 flex 示例：
.outer { display: flex; flex-direction: column; } .row { display: flex; } .item { flex: 1; } - 兼容性虽好（IE10+），但代码量和可读性不如 grid，除非项目强要求支持 IE
响应式下四块变两块或一块怎么处理
别靠 JS 动态改 class，用 CSS 媒体查询 + grid-template-columns 切换更稳。核心是让列数随屏幕缩放自动变化，而不是重写整个布局逻辑。
- 手机竖屏（≤480px）：
@media (max-width: 480px) { grid-template-columns: 1fr; grid-template-rows: unset; }→ 四块叠成一列 - 平板横屏（600–900px）：
grid-template-columns: repeat(2, 1fr);→ 两列两行，仍是四块 - 注意
grid-template-rows: unset是为了清除之前设的固定行高，让内容撑开 - 避免用
display: none隐藏某块来“模拟”数量变化——这会破坏语义和可访问性
真正麻烦的不是“怎么分”，而是分完之后每块里内容高度不一致导致视觉割裂。这时候 align-items: stretch（grid 默认）能拉齐，但若子元素有 margin 或 border，得确认 box-sizing 是 border-box，否则高度计算会偏移。
