CSS Grid实现元素垂直展开不影响同行其他元素的方法

核心问题是CSS Grid默认会让同一行的网格项高度统一，且行高由该行最高元素决定。要实现卡片独立展开，只需让展开内容脱离Grid的布局流，同时保留Grid的布局结构：

步骤1：调整Grid容器对齐方式 #

给Grid容器添加align-items: start，取消强制拉伸网格项到行高的默认行为：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start; /* 关键：网格项顶部对齐，不强制统一高度 */
}

步骤2：卡片容器设置相对定位 #

让卡片成为展开内容的定位基准：

.card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
}

步骤3：折叠面板内容脱离文档流 #

将accordion的展开部分设置为绝对定位，默认隐藏，激活时显示：

.accordion-content {
  position: absolute;
  top: 100%; /* 紧贴卡片底部 */
  left: 0;
  right: 0;
  background: inherit; /* 继承卡片背景色 */
  border: inherit;
  border-top: none; /* 避免重复边框 */
  border-radius: 0 0 8px 8px;
  padding: 1.25rem;
  display: none;
  z-index: 10; /* 确保展开内容在其他卡片上方 */
}

.accordion-content.active {
  display: block;
}

补充说明 #

• 展开内容会覆盖下方元素，若需要避免遮挡，可根据实际场景调整z-index或给Grid容器添加足够的底部内边距。
• 如果需要动画效果，可将display: none/block替换为max-height: 0和max-height: 1000px（配合overflow: hidden和transition），绝对定位下max-height动画依然有效。

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