A Guide for Beginners To CSS Grid Vs Flexbox

By Focusoncode November 22, 2018

Everything you browse on the internet is contained in web pages. Those web pages accommodate content and that content needs a layout to fit itself in it.

Nowadays, the technology has enabled us to browse the web on any screen dimension we wish for and your content should be responsive to any dimension we put forward. That’s where responsive layout design knocks the door.

CSS has always been used to design the layout and looking of web pages but producing complicated multi-column layouts has always been fiddly and hackish, and frustrating to get working consistently and precisely across browsers as well.

First, we used tables, floats, positioning, and inline-block, but all of these techniques left out a lot of major functionality (vertical centering, for example).

To solve these layout complications, we invented proper responsive layout models available natively in the browser, out of which – Flexbox, CSS Grid, and Bootstrap became most popular and are widely supported across all platforms & browsers.

One dimension vs two dimensions

What you should know is that Flexbox is made for one-dimensional layout and Grid is made for two-dimensional layouts.

This means that if you’re laying out items in one direction (for example three buttons inside a header), then you should use Flexbox:

However, if you’re going to create an entire layout in two dimensions — with both rows and columns — then you should use CSS Grid:

 

In this case, the CSS Grid will give you more flexibility, make your markup simpler and the code will be easier to maintain. Now you can, of course, combine the two.

Content-first vs layout-first

Another core difference between the two is that Flexbox takes the basis in the content while the Grid takes the basis in the layout. This might seem abstract, so let’s look at a specific example, as that makes it easier to understand.

We’ll use the header from the previous paragraph. Here’s the HTML for it:

<header>
    <div>Home</div>
    <div>Search</div>
    <div>;Logout</div>
<header>

Before we turned it into a Flexbox layout these div’s would have been stacked on top of each other like this:

However, when we give it a display: flex; the items will be placed nicely on a line.


header {
    display: flex;
}

 

To move the logout button to the far right side, we’ll simply target that element and give it a margin:

header > div:nth-child(3) {
margin-left: auto;
}

Which results in the following:

What I want you to notice here is that we leave it up to the items themselves to decide how they’re placed. We didn’t have to pre-define anything else than display: flex; initially.

This is at the core of the difference between Flexbox and Grid, and it will be more apparent as we recreate this header using Grid.

Grid header

We can create our header in several different ways using CSS Grid. I’m going to go with a pretty straightforward one, where our grid has ten columns, each being one fraction unit wide.


header {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

It’ll look identical to the Flexbox solution.

However, we can peek under the hood to see what’s different. We’ll use the Chrome inspector to inspect the column lines:


The key difference with this approach is that we had to define the columns — the layout — first. We start with defining the width of the columns, and then we place the content in the available grid cells.

This approach forced us to take a stance on how many columns we wanted to split our header into.

Unless we change the grid, we’re stuck with ten columns. A limitation we wouldn’t have had to deal with in Flexbox.

In order to change the logout to the far right-hand side, we’ll place it in the tenth column, like this:


header > div:nth-child(3) {
    grid-column: 10;
}

Here’s how that looks when we’re inspecting the grid:


We couldn’t simply have given it a margin-left: auto; because the log out button had already been placed in a specific cell in the layout, in the third column. To move it, we had to find another grid cell for it.

 

Leave a Comment

Your email address will not be published.