如何实现grid-auto-rows属性的动画？CSS Grid展开功能开发

问题说明 #

我有一个包含可变数量grid-item的CSS Grid布局，每个grid-item的尺寸也不固定。需要实现一个展开功能：初始状态只显示指定行数，点击按钮后展开到完整高度，显示所有内容。之前尝试给grid-auto-rows设置从0fr到1fr的过渡动画，但这个属性不支持过渡效果，没法实现平滑展开。

解决方法 #

改用容器的max-height配合overflow: hidden来实现平滑过渡，因为max-height是支持CSS过渡的核心属性。具体思路：

• 给Grid容器设置初始max-height，对应你想显示的指定行数的高度
• 开启overflow: hidden隐藏超出部分
• 点击按钮时，给容器添加类，把max-height设为足够大的值以容纳所有内容

完整代码示例

HTML

<div class="grid">
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
</div>
<button>展开</button>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  /* 初始显示1行：grid-item高度 + 底部间距，根据实际需求调整 */
  max-height: calc(100px + 1rem);
  overflow: hidden;
  /* 给max-height添加过渡动画 */
  transition: max-height 0.5s ease;
}

.grid.expanded {
  /* 设置足够大的值，确保能容纳所有内容 */
  max-height: 1000px;
}

/* 展开后隐藏按钮 */
.grid.expanded + button {
  display: none;
}

JavaScript

const button = document.querySelector('button');
const grid = document.querySelector('.grid');

button.addEventListener('click', () => {
  grid.classList.add('expanded');
});

适配可变高度的补充方案 #

如果grid-item高度不固定，没法提前计算初始max-height，可以用JS动态获取初始显示行数的实际高度：

// 假设初始显示2行，4个item为1行，所以取前8个item计算高度
const gridItems = document.querySelectorAll('.grid-item');
let initialHeight = 0;
const itemsPerRow = 4;
const showRows = 2;

for (let i = 0; i < itemsPerRow * showRows; i++) {
  if (gridItems[i]) {
    initialHeight += gridItems[i].offsetHeight;
  }
}
// 加上行间距：(行数-1)*间距值（16px为1rem默认值）
initialHeight += 16 * (showRows - 1);
document.querySelector('.grid').style.maxHeight = `${initialHeight}px`;

内容的提问来源于stack exchange，提问作者Patrik Šticha