HTML
<div class="grid">
<!-- First Row -->
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<!-- Second Row -->
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
CSS
body {
padding: 20px;
background: #3498DB;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-gap: 1.5em;
}
.grid__item {
width: 100%;
height: 200px;
background: #E5F5FF;
box-shadow: 0 18px 30px 2px rgba(0,0,0,0.10);
border-radius: 15px;
}
