如何实现带动态全屏行的CSS Grid？求技术方向指引

仅靠CSS Grid本身无法实现点击交互触发的动态行显示——CSS Grid只是布局系统，不具备处理用户点击这类交互事件的能力，必须结合CSS技巧或JavaScript才能完成需求。以下是两种可行的技术方向：

一、纯CSS方案：Checkbox Hack #

利用CSS的:checked伪类配合兄弟选择器，模拟点击触发的状态切换，无需JavaScript：

• 用隐藏的<input type="checkbox">作为状态触发器，点击元素用<label>关联对应的checkbox
• 动态全屏行通过grid-column: 1 / -1实现占满整列宽度，默认隐藏，当checkbox被选中时显示
• 可配合CSS过渡动画实现展开/收起的平滑效果

示例代码：

<div class="grid-container">
  <label for="toggle-1" class="grid-item">点击展开内容</label>
  <input type="checkbox" id="toggle-1" hidden>
  <div class="full-row">这是全屏宽度的动态内容行</div>

  <label for="toggle-2" class="grid-item">点击展开另一行</label>
  <input type="checkbox" id="toggle-2" hidden>
  <div class="full-row">这是另一组全屏内容</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  padding: 1rem;
  background: #f0f0f0;
  cursor: pointer;
}

.full-row {
  grid-column: 1 / -1;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  background: #e0e0e0;
}

#toggle-1:checked ~ .full-row,
#toggle-2:checked ~ .full-row {
  height: 80px;
  padding: 1rem;
}

二、JavaScript + CSS Grid方案（更灵活） #

通过JavaScript监听点击事件，控制动态行的显示/隐藏，适合复杂的交互逻辑：

• 给每个可点击元素绑定点击事件，触发时切换对应全屏行的显示状态（比如添加/移除active类）
• 全屏行同样用grid-column: 1 / -1设置宽度，通过CSS类控制显示/隐藏

核心逻辑示例：

// 获取所有可点击元素和对应全屏行
const triggerItems = document.querySelectorAll('.grid-item');
triggerItems.forEach(item => {
  item.addEventListener('click', () => {
    // 假设每个触发元素的下一个兄弟是全屏行
    const fullRow = item.nextElementSibling;
    fullRow.classList.toggle('active');
  });
});

对应的CSS：

.full-row {
  grid-column: 1 / -1;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  background: #e0e0e0;
}

.full-row.active {
  height: 80px;
  padding: 1rem;
}

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