响应式布局实现：每行3个等高盒子（2个正方形+1个16:9）

嘿，这个需求我之前也碰到过，用CSS Grid就能完美解决，代码简洁还易维护，完全符合你的要求！我给你拆解一下实现步骤：

核心思路 #

利用CSS Grid的自动行高对齐特性保证同一行盒子高度一致，再通过padding-top百分比技巧实现正方形和16:9的比例盒子，最后用gap属性控制盒子间的间距，自动换行的需求也能被Grid原生支持。

完整代码实现 #

HTML结构 #

<div class="box-container">
  <!-- 正方形盒子 -->
  <div class="box square">
    <div class="box-content">正方形盒子1</div>
  </div>
  <!-- 正方形盒子 -->
  <div class="box square">
    <div class="box-content">正方形盒子2</div>
  </div>
  <!-- 16:9比例盒子 -->
  <div class="box wide">
    <div class="box-content">16:9盒子</div>
  </div>
  <!-- 自动换行的盒子 -->
  <div class="box square">
    <div class="box-content">换行的正方形盒子</div>
  </div>
  <!-- 可继续添加更多盒子，会自动按规则换行排列 -->
</div>

CSS样式 #

/* 容器基础样式 */
.box-container {
  /* 开启Grid布局 */
  display: grid;
  /* 每行固定3列，每列宽度均分可用空间 */
  grid-template-columns: repeat(3, 1fr);
  /* 盒子间的间距（同时控制行、列间距） */
  gap: 5px;
  /* 给容器加内边距，避免边缘盒子贴紧页面 */
  padding: 10px;
}

/* 所有盒子的通用样式 */
.box {
  background-color: #f0f0f0; /* 方便看效果，可替换成自己的样式 */
  position: relative; /* 为内部内容的绝对定位做铺垫 */
  border-radius: 4px; /* 可选圆角，按需调整 */
  overflow: hidden;
}

/* 正方形盒子：padding-top=100%（基于宽度计算），实现完美正方形 */
.box.square {
  padding-top: 100%;
}

/* 16:9比例盒子：padding-top=9/16*100%=56.25% */
.box.wide {
  padding-top: 56.25%;
}

/* 盒子内容容器：绝对定位铺满整个盒子，方便居中内容 */
.box-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 用flex布局让内容垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

/* 响应式适配：小屏幕下自动调整列数 */
@media (max-width: 768px) {
  .box-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .box-container {
    grid-template-columns: 1fr;
  }
}

关键细节解释 #

1. Grid的自动行高对齐：CSS Grid默认会让同一行的所有网格项高度统一，完全满足你“所有盒子高度一致”的要求，不用额外写复杂的对齐代码。
2. 百分比padding实现比例：padding-top的百分比是基于元素宽度计算的，所以100%对应正方形，56.25%（9/16）对应16:9的宽高比，这是实现固定比例盒子的经典技巧。
3. 自动换行逻辑：grid-template-columns: repeat(3, 1fr)会自动将第4个盒子放到下一行的第一个位置，完全符合你的需求。
4. 响应式适配：通过媒体查询调整grid-template-columns的列数，在平板、手机等设备上自动适配布局，提升移动端体验。

这个方案纯CSS实现，没有复杂计算或JS依赖，代码结构清晰，后期维护也方便。你可以直接复制代码，替换成自己的内容和样式就行！

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