如何实现两div等高且其一保持正方形比例，无JS解决单列矩形高度异常

实现方案 #

1. CSS Grid 更适合该场景 #

相比flexbox需要额外处理高度继承、元素对齐的问题，Grid可以直接定义行列规则、统一高度基准、原生支持顺序交替，不需要依赖padding hack或者JS计算，更适配你的交替布局需求。

2. 核心问题修复思路 #

你遇到的最后一行矩形高度为0的问题，本质是height: 100%依赖父元素高度，而父元素高度又需要子元素撑开，形成了循环依赖。只要给矩形也设置和自身宽度挂钩的宽高比规则，就可以完全规避该问题。

3. 完整代码实现 #

首先定义网格容器基础规则：

.grid-container {
  display: grid;
  /* 每行两列，宽度各占一半，可根据实际需求调整列宽比例，比如需要矩形更宽可设为1fr 2fr */
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* 可自定义元素间距 */
}

定义两类元素的宽高比，优先使用原生aspect-ratio属性（兼容性覆盖95%以上全球用户）：

/* 正方形 */
.square {
  aspect-ratio: 1 / 1;
  width: 100%;
}
/* 矩形：宽高比可根据你的实际需求调整，示例为2:1（宽是高的2倍） */
.rectangle {
  aspect-ratio: 2 / 1;
  width: 100%;
}

实现每行布局顺序交替，无需修改HTML结构，通过CSS调整顺序即可：

/* 4n+1、4n+2对应奇数行的两个元素，4n+3、4n+4对应偶数行的两个元素 */
.grid-container :nth-child(4n+1) { order: 1; }
.grid-container :nth-child(4n+2) { order: 2; }
.grid-container :nth-child(4n+3) { order: 2; }
.grid-container :nth-child(4n+4) { order: 1; }

如果需要兼容不支持aspect-ratio的旧浏览器，可改用padding方案实现宽高比：

/* 兼容版正方形 */
.square {
  height: 0;
  padding-bottom: 100%;
}
/* 兼容版矩形，2:1宽高比对应padding-bottom为50% */
.rectangle {
  height: 0;
  padding-bottom: 50%;
}

该方案下，即使最后一行只有单独的矩形元素，也会按照统一的宽高比自动撑开高度，和其他行的矩形高度完全一致，无需任何JS介入。

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