隐藏CSS Grid中的列

Question

我对css网格很新，我试图找出如何让一个专栏完全消失并强制其他人进行堆叠。

我基本上希望下面的红色划线完全消失，然后将网格中的所有其他内容堆叠成几行。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

它的编码：

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

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

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

.wrapper > div {
  background-color: lightgreen;
}

<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>

Answer 2

grid-template-columns: repeat(3, minmax(155px, 1fr)) 0;

一个人看不到宽度为0的东西。

例如，如果您希望在悬停时看到它，只需重新定义grid-template-columns。

.wrapper:hover {
   grid-template-columns: repeat(3, minmax(155px, 1fr)) 1kebab; // 1 kebab being your new width.
}