Four up displays four content blocks side by side..
<div class="c-four-up">
<div class="c-four-up__item">
Item 1
</div>
<div class="c-four-up__item">
Item 2
</div>
<div class="c-four-up__item">
Item 3
</div>
<div class="c-four-up__item">
Item 4
</div>
</div>
.c-four-up {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
}
.c-four-up__item {
min-height: 250px;
padding: 20px;
border: 1px solid gray;
}
.c-four-up {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
&__item {
min-height: 250px;
padding: 20px;
border: 1px solid gray;
border-radius: 5px;
}
}