Flexbox vs CSS Grid: A Practical Example

For many of us, when we set up a website, it was very usual to use tables, floats and other properties that CSS gave us; although they were orthopaedic tools if the design was complex.

A few years ago Flexbox appeared, which was specially designed to create a page with a responsive design. Flexbox made aligning elements and their content much easier, allowing us to create fluid, flexible and dynamic pages, which work in a wide catalogue of devices simply using CSS. Flexbox eliminated the challenge of creating this type of page at once.

But for some months now there is a new tool, CSS Grid, which is natively compatible with Chrome 57 and Firefox 52. So if you have your browsers updated, you will already have these versions. Hopefully, in the near future it will be compatible with the rest of browsers.

So the question is clear: should I continue using Flexbox or should I start working on my projects with CSS Grid? To get rid of doubts, we will create a small template, and we will try to apply our design using both Flexbox and CSS Grid to see which one is more appropriate.

Flexbox vs CSS Grid: our HTML base

As we have said, we will work on a basic HTML, on which we will apply our CSS, on the one hand using Flexbox and on the other hand CSS Grid. You can work directly on CodePen, so you can follow step by step everything we do in the article.

CodePen

As you see, the design is very simple, and now a bit ugly, but we want each of its sections to be quite recognizable. Our HTML basically consists of a header with several links, a main section, a sidebar and a footer, all inside a container. With all this, we try to mark several goals, trying to keep the cleanness of our code:

• Positioning each of the four sections of HTML.
• Aligning the different elements of the header.
• Making responsive your website.

FLEXBOX

We will start with the solution we would use with Flexbox. We will add a display: flex to the container, and we will position its child elements vertically. This will cause sections to be placed under one another.

.container {

display: flex;

flex-direction: column;

}

Next, we need the main section and sidebar side by side. As flex containers usually go in one direction, we will add a wrapper to our HTML, which will have both the main section and the sidebar. We will add a display to this wrapper: flex, but this time in a horizontal direction.

.wrapper {
    display: flex;
    flex-direction: row;
}

We only have to decide the proportions of both the main section and the sidebar. For example, the main section will have four times the size of the sidebar, thus we will add a margin to the first so there is some space between each section.

.main {
    flex: 4;
    margin-right: 40px;
}
.sidebar {
   flex: 1;
}

CSS GRID

There are several ways to use CSS Grid, but this time we will be helped by this syntax. First, we will define our four grid areas:

header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}

Next, we can configure the layout of each grid-area with its corresponding margins:

.container {
    display: grid;   
    grid-template-columns: 4fr 1fr;
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";
    grid-gap: 40px;
}

Although at first it may seem less understandable, once we know how to use the CSS Grid syntax, we see how writing is even simpler than in Flexbox.

Aligning header elements

FLEXBOX

Our header has several links and a button; and we want the links to be justified to the left and the button to the right.

header {
    display: flex;
    justify-content: space-between;
}

Once we have both the list of links and the button in their respective position, we will make all the elements of the navigation list align horizontally.

header nav {
    display: flex;
    align-items: baseline;
}

We could also have used a display: inline-block, but as we want to make Flexbox, we will use it to solve everything.

CSS GRID

To separate the navigation list from the button, we will convert the header into a display: grid to two columns and we will justify each one of them.

header{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
header nav {
    justify-self: start;
}
header button {
    justify-self: end;
}

The correct alignment of the elements of the navigation list will not be as precise as we want, since we do not have the align-items option that we have in Flexbox. Therefore, we will have to define another grid inside.

header nav {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end; 
}

Here is one of the weaknesses of CSS Grid, because despite the ease of aligning containers, it is not very good to do the same with the elements that are inside.

Making your website responsive

FLEXBOX

Last but not least, we will see the solution that Flexbox gives us for when we need to make our web responsive. For this, we are only going to change the direction of the wrapper, from horizontal to vertical (or from row to column.) As it is a simple page, we will only use one size for our media-query.

@media (max-width: 660px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }

CSS GRID

As we have several defined grid-areas, we will reorder them within our media-query.

@media (max-width: 660px) {
    .container {	
        grid-template-areas: 
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

Conclusions

As you can see throughout the article, there is no better solution than another. The best work system that we can choose is to use both Flexbox and CSS Grid in our projects together, since each has its strengths in different things.

• CSS Grid is better for the general construction of your page, since it is easier to model your template with it and you can create more asymmetrical and peculiar designs.
• CSS Grid in rows and column designs.
• Flexbox is better aligning the content within the different elements of the web.
• Flexbox in designs with rows or columns works better in one dimension.

For all this, there is no reason to use only Flexbox or CSS Grid. We recommend you to learn both and use them together in your projects.