Hiding columns in CSS Grid
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>