如何实现相邻div容器的子元素在垂直方向齐平对齐

页面中共有3个垂直排列的父div元素，每个父div内部包含若干以蓝色矩形标识的子div元素，需要实现所有子div在垂直方向上保持齐平对齐，布局效果如下：

根据场景不同，可以选择以下三种实现方式：

方案1：CSS Grid 全局网格对齐（推荐，适配动态内容） #

这是精度最高、代码量最少的方案，核心是利用display: contents让父容器不参与布局，所有子元素直接对齐到全局网格线，天然实现垂直齐平，支持子元素高度自适应内容。

/* 3个父div的共同外层容器 */
.container {
  display: grid;
  /* 列规则按业务需求调整，示例为4列等宽布局 */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; /* 子元素之间的间距按需调整 */
}
.parent-div {
  /* 父元素占满整行网格宽度 */
  grid-column: 1 / -1;
  /* 关键属性：消除父元素的布局盒子，子元素直接成为网格项参与全局对齐 */
  display: contents;
}
.child-div {
  background: blue;
  /* 无需设置固定高度，高度自适应内容时依然保持对齐 */
}

该方案兼容所有现代浏览器（Chrome 65+、Firefox 59+、Safari 11.1+），覆盖98%以上的全球用户。

方案2：Flex 布局+统一尺寸（兼容性最优，适合固定内容场景） #

如果需要兼容更老的浏览器，且子元素内容固定、高度可控，可以给所有子元素设置统一的垂直边距和高度，父元素用横向Flex排列即可实现对齐。

.parent-div {
  display: flex;
  gap: 12px;
  margin-bottom: 24px; /* 父容器之间的垂直间距 */
}
.child-div {
  background: blue;
  flex: 1;
  height: 100px; /* 所有子元素统一固定高度 */
  margin: 8px 0; /* 所有子元素统一上下外边距 */
}

注意：该方案不支持子元素动态高度，如果某一个子元素被内容撑高，同位置的其他子元素不会同步调整高度，会出现对齐错位。

方案3：JS 动态计算对齐（适配高度动态且不支持Grid的极端场景） #

如果子元素内容动态加载、高度不固定，同时需要兼容不支持Grid的老旧浏览器，可以通过JS遍历同列子元素，取最大高度统一赋值实现对齐。

// 获取所有父容器
const parents = document.querySelectorAll('.parent-div')
// 取第一个父容器的子元素数量作为列数
const columnCount = parents[0].children.length
for (let colIndex = 0; colIndex < columnCount; colIndex++) {
  let maxColHeight = 0
  // 遍历同列所有子元素，计算最大高度
  parents.forEach(parent => {
    const currentChild = parent.children[colIndex]
    maxColHeight = Math.max(maxColHeight, currentChild.offsetHeight)
  })
  // 将同列所有子元素高度设置为最大高度
  parents.forEach(parent => {
    parent.children[colIndex].style.height = `${maxColHeight}px`
  })
}

如果子元素内容会动态变化，在内容更新后重新执行上述逻辑即可重新对齐。

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