CSS 3x2网格如何实现最后一列响应式换行且所有单元格高度比例一致

解决方案 #

你可以改用CSS Grid实现该需求，原生支持等高单元格，且响应式调整更灵活，无需嵌套多层容器，完整可运行代码如下：

CSS代码

.wrapper {
  margin: 2px;
  display: grid;
  /* 大屏默认3列均分宽度 */
  grid-template-columns: repeat(3, 1fr);
  /* 所有行高度自动统一，实现等高 */
  grid-auto-rows: 1fr;
}

.cell {
  border: 1px solid #000; /* 仅用于演示 */
  min-height: 20px; /* 仅用于演示 */
}

/* 小屏幕断点，可根据实际需求调整阈值 */
@media (max-width: 768px) {
  .wrapper {
    /* 小屏改为2列 */
    grid-template-columns: repeat(2, 1fr);
  }
  /* 原第三列的单元格占满整行，排在当前行下方 */
  .cell:nth-child(3n) {
    grid-column: 1 / -1;
  }
}

HTML代码

<div class='wrapper'>
  <div class='cell'>1</div>
  <div class='cell'>2</div>
  <div class='cell'>3</div>
  <div class='cell'>4</div>
  <div class='cell'>5</div>
  <div class='cell'>6</div>
</div>

实现说明

• grid-auto-rows: 1fr 会自动让所有行的高度保持一致，直接解决单元格高度不一致的问题
• 小屏下通过媒体查询修改网格为2列，同时设置原第三列单元格跨全列显示，自动排列在前两列的下方，完全符合布局要求
• 代码结构比原flex嵌套写法更简洁，后续修改布局规则更方便

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