Perhaps you are a beginner to CSS and wondering if you should use flex or grid for your layout, or perhaps you have heard the popular statement saying to use flex for 1D layout and grid for 2D layout, you have come to the right place.

This article will show you the difference between flex and grid and when to use which, so you can confidently use the suitable one for your project!

Debunking myths 🎈📌

Let's start by debunking the common myth about flex and grid being limited to 1D & 2D layouts.

We would be using the following as base HTML:

<div class="container">
  <div>
    Lorem, ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur.
  </div>
  <div>
    Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Facilis.
  </div>
  <div>
    Lorem ipsum dolor sit amet.
  </div>
  <div>
    Lorem ipsum dolor sit, amet consectetur
    adipisicing elit.
  </div>
  <div>
    Lorem, ipsum dolor.
  </div>
</div>

And add the following CSS to make the bounds of the elements visible:

.container {
  border: 1px solid #000;
}

.container > div {
  border: 1px solid #000;
}

This is what we get:

2D Layout with Flex

On adding display: flex to the CSS

.container {
  display: flex;
}

The elements align themselves in a row.

Plugging in one more property to the CSS

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

The elements that cannot be fitted in the first line jump to the next line & the myth that flex can be used for 1D layout only goes down the drain.

1D Layout with Grid

Even though adding display: grid to the CSS, changes nothing,

.container {
  display: grid;
}

As soon as we add grid-auto-flow: column, the elements align themselves in a row.

And we have debunked this myth too!

So when should you actually use flex or grid? 🤨

CSS grid focuses on precise content placement. Each item is a grid cell, lined up along both horizontal and vertical axis. If you want to accurately control the position of items within a layout, CSS grid is the way to go.

Whereas, flexbox focuses on content flow rather than content placement. Widths (or heights) of flex items are determined by the content of the item. Flex items grow and shrink according to their inner content and the available space.

With the flex-wrap, you might have noticed that the elements only take up as much space as they require.

That is not the case for the grid. On adding the following CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

We find that all the elements have the same width, regardless of their content. They also share the same height as all the elements in the particular row.

Use Cases 🎬

Flexbox

The ideal use case for flexbox would be when you want to display items without taking up equal space, like in a navbar.

Grid

grid can be used to display items like cards, where each element should have equal spacing.

It can also be used to create masonry layouts, where the items are laid out in a grid, but the items expand beyond a single row/column, which can be done by adding a few CSS properties to the child elements:

.grid-parent .child-2-by-2-tile {
  grid-column: span 2;
  grid-row: span 2;
}

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow me on Instagram to check out what I am up to recently.

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

1. I am a beginner, how should I learn Front-End Web Dev?
   Look into the following articles:

   1. Front End Development Roadmap
   2. Front End Project Ideas

2. Would you mentor me?
   
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.