如何优化交互式CSS Grid：实现点击展开后自动填补空白？

核心是靠CSS Grid的grid-auto-flow: dense让元素自动填补空白，再用JS控制唯一的展开状态，完美解决你的需求。

1. HTML结构 #

<div class="grid-container">
  <div class="grid-item" id="one">1</div>
  <div class="grid-item" id="two">2</div>
  <div class="grid-item" id="three">3</div>
  <div class="grid-item" id="four">4</div>
  <div class="grid-item" id="five">5</div>
  <div class="grid-item" id="six">6</div>
</div>

2. CSS样式 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  /* 关键：开启自动填补空白的布局逻辑 */
  grid-auto-flow: dense;
}

.grid-item {
  padding: 2rem;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* 展开状态：跨整行显示 */
.grid-item.expanded {
  grid-column: 1 / -1;
  background: #e0e0e0;
}

3. JavaScript逻辑 #

let currentExpanded = null;

document.querySelectorAll('.grid-item').forEach(item => {
  item.addEventListener('click', () => {
    // 点击已展开的元素，直接收起
    if (item === currentExpanded) {
      item.classList.remove('expanded');
      currentExpanded = null;
      return;
    }

    // 先收起之前展开的元素
    if (currentExpanded) {
      currentExpanded.classList.remove('expanded');
    }

    // 展开当前元素
    item.classList.add('expanded');
    currentExpanded = item;
  });
});

为啥这么写？ #

• grid-auto-flow: dense是最关键的一步：默认Grid是按顺序排元素，前面空了也不管，加了这个属性后，它会主动把后面的元素塞进前面的空白单元格里。比如你点#two展开后，它原来占的位置空了，#three会自动移到#two原来的位置，#four补到#three原来的位置，刚好填满空白。
• JS部分就管着“同一时间只能有一个展开元素”的规则：点新元素就先收旧的，点自己就切换状态，逻辑简单直接。

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