<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.