在div中显示隐藏元素会将整个水平网格行向下移动，如何使其仅将打开元素下方的元素向下移动？

Question

我正在练习 HTML、CSS 和 JavaScript，在尝试为公司服务创建容器时遇到问题。每个服务 div 都有一个按钮来显示更多文本，从而“打开”该 div。我注意到网格中的整行都向下移动。

一行中应该有 3 个服务 div，然后应该有与剩余服务 div 一样多的行，并且水平行中的第一个元素应该位于左侧。我试图使隐藏元素显示时，它只会向下移动打开元素下方的服务 div，而不是整行。

Answer 1

你需要结合 grid 和 flexbox 的力量来解决这个问题。

使用三列单行的网格。在每个网格单元中，放置一个样式为 Flexbox 的 div。然后将您的服务 div 放入弹性盒中。

document.querySelector('.d1').addEventListener('click', evt => {
  evt.target.classList.toggle('expanded')
})

.d1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.d1>div {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.d1>div>div {
  border: 2px solid red;
  border-radius: 10px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 250ms;
}

.d1>div>div.expanded {
  height: 200px;
}

.d1>div>div:hover {
  background: pink;
}

<div class="d1">
  <div>
    <div>click me</div>
    <div>click me</div>
    <div>click me</div>
  </div>
  <div>
    <div>click me</div>
    <div>click me</div>
    <div>click me</div>
  </div>
  <div>
    <div>click me</div>
    <div>click me</div>
    <div>click me</div>
  </div>
</div>