用 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 分两列。结构变深，维护成本上升。
商品查询功能提供了一个快速查看商品的途径。商品查询分为基本查询和高级查询。基本查询：提供关键字和商品大类两种条件的查询，用户可以只填写关键字或者选择商品大类或者关键字和商品大类都填写来查询商品。高级查询：提供关键字，商品大类，商品小类，商品价格范围四种条件的查询，用户可以任意填写其中一种或几种的查询条件来查询想要了解的商品信息。商品查询功能大大的方便了用户，提高了网站的用户体验。（5）帮助系统模块
立即学习“前端免费学习笔记（深入）”；
- 单层 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，否则高度计算会偏移。
