Grid vs Flex: Where to use which? 🤔
Tags: css, webdev, html, beginners
Published: 2022-07-24 06:11:50

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**:

```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:

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

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

This is what we get:

![starting-point](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiqkbm5cunh59mo913l7.png)

### 2D Layout with Flex

On adding `display: flex` to the **CSS**

```css
.container {
  display: flex;
}
```

The elements align themselves in a row.

![flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sphtoof8sgh8arlw5shz.PNG)

Plugging in one more property to the **CSS**

```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.

![flex-wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn25f3z9cxv2gqv452sy.PNG)

### 1D Layout with Grid

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

```css
.container {
  display: grid;
}
```

![starting-point](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiqkbm5cunh59mo913l7.png)

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

![grid-row](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7g72xqzmzmlfh5s05ig.PNG)

And we have debunked this myth too!

![yay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bndzvrmqsefc3d29wh4t.gif)

## 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**.

![flex-wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn25f3z9cxv2gqv452sy.PNG)

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

```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**.

![grid-wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0nafiehsbcgmyxwp8v0.PNG)

## 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**.

![navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt9bo1enuy4h9d3b87x6.png)

### Grid

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

![cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9cmiwf3fydr1lv0prxz.png)

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:

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

![masonry-grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ynv2mz021bqpjaecvwm.jpg)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to recently.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**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](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

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