A simple example of Flexbox in action

November 25, 2019

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!