在 CSS 网格中隐藏列

Question

我是 css grid 的新手，我试图弄清楚如何让一列完全消失并强制其他列堆叠。

我基本上希望下面的红色划掉的完全消失，只需将网格中的所有其他东西堆叠成几行。

使用下面的代码，我想block 4消失。然后我想要块 1/2/3/5/6 堆叠。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(155px, 1fr)) 1fr;
  grid-gap: 10px;
  padding: 0.5rem;
}

<div class="wrapper">
  <div>
    Block 1
  </div>
  <div>
    Block 2
  </div>
  <div>
    Block 3
  </div>
  <div>
    Block 4
  </div>
  <div>
    Block 5
  </div>
  <div>
    Block 6
  </div>
</div>

它的代码笔：

https://codepen.io/allencoded/pen/goNYwv

Answer 1

确保每行只能有四个项目：

grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-gap: 10px;

每个项目的最小宽度为 20%，并且有一个网格间隙（任何长度），每行不能超过四个项目。

然后，隐藏每行中的第四项：

div:nth-child(4) { visibility: hidden; }

https://codepen.io/anon/pen/LeKzzx

grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-gap: 10px;

div:nth-child(4) { visibility: hidden; }