<div class="grid">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
.grid {
display: grid;
gap: 20px;
max-width: 620px;
width: 90%;
margin: 0 auto;
}
@media(min-width: 780px) {
.grid {
grid-template-columns: 1fr 1fr;
}
.grid :first-child {
grid-column-end: span 2;
}
}
.card {
border-radius: 12px;
background-color: #0180AE;
height: 140px;
}
body {
margin: 2rem 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.