CSS Grid动态高度布局：可折叠区块与响应式实现需求

核心思路 #

通过CSS类切换+Grid模板动态调整实现折叠功能，配合JS监听点击事件触发状态切换，同时保留你已有的响应式媒体查询逻辑。

1. HTML结构 #

<div class="grid-container">
  <div class="block block-blue">蓝色可折叠区块</div>
  <div class="block">区块2</div>
  <div class="block">区块3</div>
  <div class="block">区块4</div>
</div>

2. CSS样式（含折叠逻辑+响应式） #

/* 基础Grid布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(500px, 1fr));
  grid-template-rows: repeat(2, minmax(300px, 1fr));
  gap: 10px;
  height: 100vh;
  transition: grid-template-rows 0.3s ease; /* 行高变化动画 */
}

.block {
  min-width: 500px;
  min-height: 300px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

.block-blue {
  background-color: #2196F3;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 折叠状态：修改第一行高度为100px，第二行自动填充剩余空间 */
.grid-container.blue-collapsed {
  grid-template-rows: 100px 1fr;
}

/* 大屏响应式（宽度>1200px） */
@media (min-width: 1201px) {
  .grid-container {
    grid-template-columns: repeat(4, 300px);
    grid-template-rows: 600px;
    justify-content: center;
  }
  /* 大屏下禁用折叠高度变化，保持统一600px高度 */
  .grid-container.blue-collapsed {
    grid-template-rows: 600px;
  }
  .block {
    min-width: auto;
    min-height: auto;
    width: 300px;
    height: 600px;
  }
}

3. JS交互逻辑 #

const blueBlock = document.querySelector('.block-blue');
const gridContainer = document.querySelector('.grid-container');

blueBlock.addEventListener('click', () => {
  gridContainer.classList.toggle('blue-collapsed');
});

关键说明 #

• 折叠功能通过修改父容器的grid-template-rows实现：折叠时第一行固定100px，第二行用1fr占满剩余垂直空间
• 给grid-container加过渡动画，让高度变化更平滑
• 大屏模式下重置折叠状态的行高，确保4列布局保持统一高度

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