css 网格，折叠一个单元格，然后使下一行的一个单元格上升

问题描述

我为我当前的网格设置做了这个简单的例子：

document.querySelectorAll(".element").forEach(box => 
    box.addEventListener("click",() => box.classList.toggle("compressed"))
)

.container{
  display:grid;
  grid-template-columns: repeat(3,min-content);
  grid-template-rows:repeat(3,min-content);
  grid-auto-flow:column;
  gap:1rem;
}

.element{
  background-color:brown;
  border:1px solid black;
  width:10rem;
  height:10rem;
  text-align:center;
  color:white;
  line-height:10rem;
  font-size:2rem;
}

.elementBig{
  grid-row-end: span 2;
   height:21rem;
}

.compressed{
  height:2rem;
}

<div class="container">
<div class="element elementBig">big</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
<div class="element">7</div>
<div class="element">8</div>
<div class="element">9</div>
<div class="element">10</div>
</div>

当您单击一个单元格时，它会缩小，但下一个单元格不会上升：假设我单击“大”元素，我希望“1”上升

我希望行数和列数是动态的，所以在实际网格中我正在使用此设置：

--n-colonne: 3; //per impostare massimo numero di colonne a 3 su grandi display
    display: grid;
    $larghezza-senza-spazi: calc(100% - (var(--n-colonne) - 1) * 1rem);
    grid-template-columns: repeat(auto-fill,minmax(max(45rem,($larghezza-senza-spazi)/var(--n-colonne)),1fr));
    grid-template-rows: repeat(12,min-content);
    grid-gap: 1rem;

如果要使用“grid-auto-flow:column”，则需要一些修复

解决方法

您面临的问题：网格有行且行有一定的高度（在您的情况下：min-content，只要行中至少有一个框未被压缩，即为 10rem）。除此之外，你的大框应该总是按照你的定义占据两行（grid-row-end: span 2;），所以调整网格单元的内容大小不会改变任何东西。

不确定网格是否适合这里，CSS3 中的新砌体添加可能有解决方案。也许读一读：https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

但是：如果您可以确定多个 cols（或通过使用 js 以某种方式计算），只需将您的框相应地放在 cols 中，它就可以正常工作。

document.querySelectorAll(".element").forEach(box =>
  box.addEventListener("click",() => box.classList.toggle("compressed"))
)

.container {
  display: grid;
  grid-template-columns: repeat(3,min-content);
  grid-auto-flow: column;
  gap: 1em;
}

.element {
  background-color: brown;
  border: 1px solid black;
  width: 10rem;
  height: 10rem;
  text-align: center;
  color: white;
  line-height: 10rem;
  font-size: 2rem;
  margin-bottom: 0.5em;
}

.elementBig {
  grid-row-end: span 2;
  height: 21rem;
}

.compressed {
  height: 2rem;
  overflow: hidden;
}

<div class="container">
  <div class="col1">
    <div class="element elementBig">big</div>
    <div class="element">1</div>
  </div>
  <div class="col2">
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
  </div>

  <div class="col3">
    <div class="element">5</div>
    <div class="element">6</div>
    <div class="element">7</div>
  </div>

  <div class="col4">
    <div class="element">8</div>
    <div class="element">9</div>
    <div class="element">10</div>
  </div>
</div>

如果这不是一个选项，您可以随时使用 flexbox，但它有其自身的挑战：

document.querySelectorAll(".element").forEach(box =>
  box.addEventListener("click",() => box.classList.toggle("compressed"))
)

.container {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  max-height: 800px;
  gap: 1rem;
}

.element {
  background-color: brown;
  border: 1px solid black;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
  line-height: 10rem;
  font-size: 2rem;
}

.elementBig {
  height: 21rem;
}

.compressed {
  height: 2rem;
}

<div class="container">
  <div class="element elementBig">big</div>
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
  <div class="element">10</div>
</div>