A simple example of Flexbox in action

Let’s make a grid like this:

1
2
3
4
5
6
7
8

Here’s the HTML:

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

Here’s the CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 25%;
}

That’s it. That’s the whole tutorial!