Basic flex

HTML

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>

CSS

.box {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px solid (0, 0, 0, 0.1);
  padding: 10px;
}

.box1 { background: #1abc9c; }
.box2 { background: #3498db; }
.box3 { background: #9b59b6; }
.box4 { background: #34495e; }
.box5 { background: #f1c40f; }
.box6 { background: #e67e22; }
.box7 { background: #e74c3c; }
.box8 { background: #bdc3c7; }
.box9 { background: #2ecc71; }
.box10 { background: #16a085; }

.container {
  display: flex;
  flex-wrap: wrap;        /* stretch across container & split across amoungst of the items */
  border: 10px solid goldenrod;
  min-height: 100vh;
  flex-direction: row;  /* main axis => x; row=x, column=y; */
}

.box {
  width: calc(33.3333% - 20px);
  margin: 10px;
}