With web development, there are two main choices to how to layout the display – flexbox or grid. In order to better understand the advantages and use cases of each, this post briefly explores each.

Flexbox

Most of what I’ve read describes the use case of flexbox as 1 dimensional. Really what this means is each flexbox is a row. So, when you want control over each row as the overall box, flexbox is your option.

<div class="flexbox-container>
    <p>Div text goes here</p>
</div>

.flexbox-container {
  display: flex;
}

Grid

Now, if you read about Grid, you’ll find this described as 2 dimensional. This covers both rows and columns. With grid, you’re creating exactly that, a grid layout defining the rows and columns (yes, like a table).

So, which do you use?

Easy answer here, both. Why? Because you can use both together. You can put a flexbox inside of a grid, or a grid inside of a flexbox. Of course, you don’t actually need to do this. You can use one or the other. Point is, you’ve got options and it’s about selecting the right tool for the job – as usual.