Hiding columns in CSS Grid

Question

I am newish to css grid and I am trying to figure out how I can make a column completely go away and enforce the others to stack.

I basically want the red crossed out ones below to completely go away and just stack all the others in the grid into several rows.

With that code below I want block 4 to disappear. Then I want blocks 1/2/3/5/6 to stack.

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

A codepen of it:

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

Answer 1

Ensure that there can only be four items per row:

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

With 20% minimum width per item, and a grid gap (of any length), there can never be more than four items per row.

Then, hide the fourth item in each row:

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>