如何在CSS Grid中实现分组换行并保持所有瓦片宽高比一致

问题原因 #

拆成多个独立grid容器的方案天生有缺陷：每个grid会独立计算列宽，当分组内瓦片数量不足以填满当前视口下的整行时，剩余空间会平均分配给当前分组的所有瓦片，导致瓦片宽度比满行状态下更宽；又因为没有锁死宽高比，瓦片高度会跟着宽度/内容变化，最终不同分组的瓦片尺寸不统一。

实现方案 #

全程用单个grid容器承载所有瓦片，通过占满整行的分隔元素实现分组断行，同时通过aspect-ratio属性强制所有瓦片保持固定宽高比，完全规避多容器各自计算布局的问题。

修正后的CSS代码

.boxes {
  width: 100%;
  display: grid;
  gap: 0.4em;
  /* 保留自适应列数逻辑：最小列宽11em，剩余空间平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
}

.box {
  padding: 3px;
  border: 1px solid black;
  /* 核心：锁死宽高比，1/1为正方形，可按需调整为4/3、16/9等比例 */
  aspect-ratio: 1 / 1;
  /* 可选：内部内容超出时自动滚动，避免撑坏瓦片 */
  overflow: auto;
}

/* 分组分隔元素 */
.break {
  /* 强制占满整行，后续瓦片自动换行到下一组 */
  grid-column: 1 / -1;
  /* 控制分组间的间距，可按需调整，也可直接在元素内放分组标题 */
  height: 0.8em;
}

修正后的HTML代码

不需要拆分多个.boxes容器，所有瓦片放在同一个grid内，分组之间插入分隔元素即可：

<h1>single</h1>
<div class="boxes">
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
</div>

<h1>multiple</h1>
<div class="boxes">
  <!-- 第一组 -->
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="break"></div>
  <!-- 第二组 -->
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="break"></div>
  <!-- 第三组 -->
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="break"></div>
  <!-- 第四组 -->
  <div class="box">lorem</div>
  <div class="break"></div>
  <!-- 第五组 -->
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
  <div class="box">lorem</div>
</div>

补充说明 #

• 该方案完全保留响应式特性：窗口宽度变化时列数自动增减，所有瓦片宽度统一，宽高比全程一致，不受分组内瓦片数量、内部内容长度影响。
• 如果需要展示分组标题，直接把标题内容放到.break元素内，调整.break的高度适配内容即可，不需要额外改布局逻辑。
• 原代码里的grid-auto-rows: 1fr可以直接删除，该属性用来控制自动生成行的默认高度，在锁死瓦片宽高比的场景下没有作用，留着反而可能在内容溢出时引发布局异常。
• 如果需要兼容极旧版本浏览器（如IE11），可以用经典的padding-top百分比hack替代aspect-ratio：给.box设置height: 0; padding-top: 100%;（100%对应1:1比例，其他比例按宽高比换算百分比即可），再给内部内容套一层绝对定位的子元素铺满瓦片即可。目前主流浏览器全版本支持aspect-ratio，优先用原生属性实现即可。

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