Search code examples
csscss-grid

Hiding columns in CSS Grid

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.

enter image description here

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

Solution

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