Back to Basic: Should we use Flexbox or Grid?
Tags: beginners, webdev, tutorial, css
Published: 2021-05-28 03:09:31


Back to Basic will answer some of my questions when I first started learning CSS. Personally, I think when you start learning CSS, it will be very hard, because CSS has about 520 properties that we can use. Of course, we won't use it all, there are many properties that I still didn't know, but there are plenty of properties that we need to understand to be proficient in CSS. This blog will not cover CSS from the really basic ones, but I will try to show you the implementation.

> If you never have used flexbox or grid before, you can check this [flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [grid guide](https://css-tricks.com/snippets/css/complete-guide-grid/) from css-tricks.

---

## Question

> When should we use flex or grid?

When I first started learning CSS and know about flexbox and grid, I got confused about when to use flexbox and grid. In this blog, I will try to explain my approach on how to choose between flexbox and grid according to the condition.

---

## Use Case of Using Flex

I always use flex to give a layout that only has 1 dimension (horizontal only or vertical). In this blog, I will give you some example of flexbox use case with some of my project that I have made.

### 1. Container that has all elements in the center both horizontally and vertically

We usually see this in a landing page

Example:

![](https://res.cloudinary.com/theodorusclarence/image/upload/q_auto,f_auto/theodorusclarence/blogs/btb-flexbox-grid/1_aa0dum)

To achieve this layout, we only need 3 lines of CSS, I suggest you to memorize this combination, because you will use this in many cases.

```css
.container {
  /*  make sure the parent element has height */
  min-height: 100vh;
  /* css to align vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If you want to make a full-page,
make sure the container has a height of the viewport */
```

### 2. Divide page into parts

This layout also commonly seen, usually to divide the container into 2 parts with the same width, we can also make it divide into 3, 4, or as many as you want.

[Codepen](https://codepen.io/theodorus/pen/xxRxVeo)

![](https://res.cloudinary.com/theodorusclarence/image/upload/q_auto,f_auto/theodorusclarence/blogs/btb-flexbox-grid/2_spnrcs)

This layout can be easily achieved by using flex, let's see the HTML first

```html
<div class="container">
  <div class="content">
    <h1>Hello Bambang</h1>
    <p>welcome to my page</p>
    <button>click me</button>
  </div>
  <img class="content" src="https://unsplash.it/700/600" alt="unsplash" />
</div>
```

As we can see, that `div.container` has 2 items which is `div.content` and `img.content`, so we can make layout that is equal parts.

```css
.container {
  min-height: 100vh;
  display: flex;
}

.content {
  /* this will make it divides in equal parts */
  width: 100%;

  /* you should use flex-basis for this, but flex-basis didn't really works on images, so I use width */
  /* flex-basis: 100%; */
  /* other tag like div works well tho! */
}

div.content {
  /* the first flexbox use case */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img.content {
  object-fit: cover;
}
```

by using `width: 100%` we make the child element to take as much space as possible. Because both of them wants to be 100%, so they compromise and span over 50%. 

> Keep note that you should replace `width: 100%` with `flex-basis: 100%` for IE compatibility purposes (credits to Ihor Vorotnov), but I specifically use width on this one because flex-basis did not really work with images. On other tag like div or headings it works okay.

We could also hard code the width or flex-basis to 50%, but adding this defeat the purpose of dividing content to equal parts because we need to change the percentage each time we add a new child.

> If we want to make a responsive design with this layout, we can utilize `flex-direction`

```css
.container {
  min-height: 100vh;
  display: flex;
  /* add this to make the flex stacked vertically */
  flex-direction: column;
}

@media (min-width: 700px) {
  .container {
    flex-direction: row;
  }
}
```

So, when we are in a mobile view, flex will stacked vertically (like how HTML normally works), and when we get into larger viewport, flex will make the child elements stack horizontally (check the codepen for demo)

### 3. Creating Navbar (using space-between)

[Codepen](https://codepen.io/theodorus/pen/KKNKMzx)

Creating a simple navbar will be very often to do and usually, the layout is spaced apart where the left side is the logo and the right side is the navigation.

![](https://res.cloudinary.com/theodorusclarence/image/upload/q_auto,f_auto/theodorusclarence/blogs/btb-flexbox-grid/3_xefqrr)

```html
<nav>
  <h3>Home</h3>
  <ul>
    <li>Route</li>
    <li>Route</li>
  </ul>
</nav>
```

`nav` has 2 children which are `h3` and `ul`. Next, we just need to reset the base style and split the children element with space-between

```css
nav {
  background-color: lightblue;
  display: flex;
  align-items: center;

  /* this property will make the child spaced apart */
  justify-content: space-between;
}

ul {
  /* remove bullet style */
  list-style: none;
  display: flex;
}

ul > li + li {
  /* add space between navigation links */
  margin-left: 2em;
}
```

All of the examples above actually can be made with a grid too. But, by using grid we need to write more CSS than using flexbox

---

## Use Case of Using Grid

[Codepen](https://codepen.io/theodorus/pen/QWGWEQJ)

Grid is usually used to make a more complex layout. My way of deciding is: _if using flex is too hard, then use grid_.

> Layouting with flex actually can also be implemented for the complex layout, but using grid will be much easier.

### 1. Making 2 dimensional layout

I usually use grid to create this layout because there is a `gap` feature to space them out. Spacing things out using flex is going to be harder if we want to make the design responsive

![](https://res.cloudinary.com/theodorusclarence/image/upload/q_auto,f_auto/theodorusclarence/blogs/btb-flexbox-grid/4_t3tnuj)

Layout like this will be very easy if using grid, we only need to make it into 2 columns.

```html
<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
</div>
```

We will simplify the layout by using `div.container` and 3 `div.item`

```css
.container {
  /* container base layout */
  max-width: 700px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}

.item {
  border: 0.2px solid white;
  height: 15em;
}
```

By using `grid-template-columns: repeat(2, 1fr)` we set the grid to divide the columns into two, and the `item` will follow the rule that we set. Last, we add the `gap: 1em` to create some whitespace.

> Grid will be very helpful in responsive design, we only need to change the rules on grid-tem to be 1 column when it is on smaller screen size, and make it to 2 columns in the larger screens

```css
.container {
  /* container base layout */
  max-width: 700px;
  margin: 0 auto;

  display: grid;
  /* no need to add grid template, because grid defaults to 1 column */
  gap: 1em;
}

@media (min-width: 700px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
```

### 2. Make layout with different sizes

[Codepen](https://codepen.io/theodorus/pen/GRNRjjY)

![](https://res.cloudinary.com/theodorusclarence/image/upload/q_auto,f_auto/theodorusclarence/blogs/btb-flexbox-grid/5_i0mfuw)

I recommend you to use Firefox Dev Tools to see lines indicating the grid numbers.

We approach this kind of layout by making 4 columns and 2 rows, then we assign the row and col placement on each of the elements. For example, the first picture spans over 2 columns and 2 rows. Check this if you have not understand the [grid numbering system](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid).

```html
<div class="container">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
</div>
```

We will simplify the layout by using `.container` as the parent.

```css
.container {
  max-width: 700px;
  margin: 0 auto;

  display: grid;
  /* makes the grid into 4 columns and 2 rows */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item {
  border: 1px solid white;
  min-height: 10rem;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3 / 5;
}

/* you can also give value to item 3 and 4,
but because it follows the natural flow of the grid I won't continue */
```

> For responsive design, we can put the image according to the rows and columns that we want, we can also change the template

---

## Summary

**Use Grid if using flex is getting too complicated**

---

> Originally posted on [my personal site](https://theodorusclarence.com/?ref=devto), find more [blog posts](https://theodorusclarence.com/blog?ref=devto) and [code snippets library](https://theodorusclarence.com/library?ref=devto) I put up for easy access on my site 🚀