<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.grid {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
}
.item {
flex: 1 1 200px; /* Items grow, shrink, and have a base size of 200px */
margin: 10px;
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.