CSS RWD不等盒子布局：flex/Grid选型及630px响应式换列方法

这个场景选 CSS Grid 比Flexbox合适得多，实现响应式断点切换的逻辑更简单，完全不需要额外调整元素排列顺序。

• Flexbox是一维布局模型，核心是沿单根主轴排列元素，虽然靠flex-wrap: wrap也能实现多列换行效果，但遇到尺寸不统一的盒子时，很容易出现换行错位、行高不对齐、列宽偏移的问题；要适配固定列数还得手动给子项计算flex-basis值，把margin占用的宽度全部核算进去，断点切换时还要重新调整计算值，维护成本很高。
• Grid是原生二维布局模型，专门为这种行列组合的网格场景设计，不需要手动核算列宽，只要定义好不同断点下的列数，浏览器会自动完成网格排列；只要DOM里的盒子是按box1到box6的顺序顺次编写的，排列顺序就不会错乱，完全符合需求。

直接给盒子容器加Grid布局即可，原有盒子的自定义尺寸样式不需要大改：

/* 盒子容器 */
.box-container {
  display: grid;
  /* 默认展示三列，每列等宽分配剩余空间 */
  grid-template-columns: repeat(3, 1fr);
}
/* 单个盒子 */
.box-item {
  margin: 50px;
  /* 盒子原有的不同尺寸样式直接保留即可，无需额外修改 */
}
/* 视口宽度小于等于630px时，布局切换为两列 */
@media (max-width: 630px) {
  .box-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

小优化提示：如果不想让容器最外层多出一圈50px的空白（由盒子的margin造成），可以去掉盒子自身的margin属性，给容器加gap: 100px——相邻两个盒子各带50pxmargin时，中间的视觉间距本来就是100px，改完之后盒子之间的间距和原有效果完全一致，容器边缘也不会有多余留白，列宽计算更精准，不会意外触发横向滚动条。

内容的提问来源于stack exchange，提问作者water