<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.items {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 40px;
padding: 0 40px;
}
.item {
width: 100%;
height: 40px;
background: blue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.