<div class="row">
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
</div>
<div class="row">
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
<div class="card">
<div class="card-content"></div>
</div>
</div>
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px 30px;
}
.card {
flex: 1 0 33%;
padding: 0 15px;
margin-bottom: 15px;
}
.card-content {
height: 100px;
border-radius: 10px;
background-color: #888;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.