解决CSS Grid搭配可折叠Div时自动增高的问题

这个问题我之前做项目的时候也碰到过，其实根源是CSS Grid默认的单元格对齐规则在搞鬼——默认情况下Grid容器的align-items属性是stretch，这会强制同一行的所有单元格高度统一，所以当其中一个单元格里的折叠Div展开后，整行高度被拉高，另一列自然就跟着出现空白区域了。下面给你两种方向的解决方案：

一、不添加父容器的CSS Grid解决方案 #

直接修改Grid容器的align-items属性，把默认的stretch改成start就能解决问题：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽布局 */
  gap: 20px; /* 列之间的间距 */
  align-items: start; /* 关键：让单元格高度由自身内容决定，不再强制拉伸 */
}

原理很简单：align-items: start会让每个Grid单元格的顶部对齐，高度完全由内部内容的实际高度决定，不再和同行的最高单元格保持一致。这样当其中一列的折叠Div展开时，另一列的高度不会被强制拉高，自然就不会出现空白区域了。

如果需要单独控制某一列的对齐（比如某列要保持拉伸，另一列自适应），也可以给对应的单元格单独设置align-self: start，不过你不想加父容器的话，直接给容器设align-items: start是最简洁的方案。

二、替代CSS Grid的实现方案 #

如果觉得Grid的这种默认行为不太符合你的需求，也可以试试以下几种替代方案：

1. Flexbox布局（推荐） #

Flexbox的逻辑和Grid类似，默认align-items: stretch会让flex item高度统一，只需要修改这个属性就能解决问题：

.flex-container {
  display: flex;
  gap: 20px; /* 列间距 */
  align-items: start; /* 同样的关键属性 */
}

.flex-item {
  flex: 1; /* 让两个列平分容器的可用宽度 */
}

Flexbox的优势是兼容性比Grid稍好（不过现在主流浏览器都已经完美支持Grid了），而且对于这种简单的两列布局，写法也非常简洁。

2. Inline-block布局（传统方案，不推荐） #

这是比较老的布局方式，需要手动处理一些细节：

.inline-container {
  font-size: 0; /* 消除inline-block元素之间的默认间距 */
}

.inline-item {
  display: inline-block;
  width: calc(50% - 10px); /* 50%宽度减去一半的间距，保证总宽度不溢出 */
  font-size: 16px; /* 恢复正常字体大小 */
  vertical-align: top; /* 关键：让元素顶部对齐，避免高度不一致的问题 */
  margin-right: 20px;
}

.inline-item:last-child {
  margin-right: 0; /* 最后一列去掉右边距，避免溢出 */
}

这种方案需要处理间距、宽度计算等细节，不如Flex和Grid省心，仅适合需要兼容非常老旧浏览器的场景。

3. CSS Columns布局（仅适合纯文本场景） #

如果你的两列内容是纯文本，可以用CSS多列布局，但它不适合包含可折叠组件的场景，因为它是基于文本流自动分栏，无法精确控制每个组件的位置：

.columns-container {
  columns: 2; /* 分成两列 */
  column-gap: 20px;
}

这个方案局限性很大，只推荐给纯文本排版的需求。

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