Skip to main content
Photo from unsplash: btb-flexbox-grid_gtwzk3

Back to Basic: Flexbox or Grid?

Written on January 29, 2021 by Cameron Decastro.

4 min read
––– views

Introduction

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 and grid guide 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:

Contoh item tengah

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.

.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 */
css

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.

Contoh bagi dua

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

<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>
html

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.

.container { min-height: 100vh; display: flex; } .content { /* this will make it divides in equal parts */ width: 100%; } div.content { /* the first flexbox use case */ display: flex; flex-direction: column; align-items: center; justify-content: center; } img.content { object-fit: cover; }
css

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%

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

.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; } }
css

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)

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.

Contoh item tengah
<nav> <h3>Home</h3> <ul> <li>Route</li> <li>Route</li> </ul> </nav>
html

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

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; }
css

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


Summary

Use Grid if using flex is getting too complicated