The Basics of CSS Grid Layout Vs. Flexbox

Since ye olden days of the web, developers have been trying to figure out the best way to arrange content on the page. We went through various phases using tables, floats, frames, and other positioning hacks, but nothing provided the right solution. Then, in 2009, a light shone through the darkness. The first working draft of the Flexible Box Layout Module was born. It came with promises of a new CSS Box Model that was optimized for user interface design and shiny two-dimensional layouts. The excitement was palpable. Finally, we could position elements both vertically and horizontally without using a janky workaround. Unfortunately, that involved nesting layouts inside of layouts. It was difficult to keep these styles organized in a maintainable fashion and alignments using static pixel widths continued to plague the early days of the responsive internet.

In 2012, a new hope appeared on the horizon. The first working draft of the CSS Grid Layout was released. But was it truly better than our hero, Flexbox? At first glance, they both seem to serve the same purpose: a better layout for page elements. 

Generally, the first question people have in regards to CSS Grid and Flexbox is: “Which one should I use?” In the words of an adorable little girl in a taco commercial: ¿Por qué no los dos?

The uses and applications for Grid and Flexbox aren’t mutually exclusive. In fact, there’s some magic in using them together. First, I’ll present a quick breakdown of what Grid and Flexbox are, and then, I’ll show you an example of how to use them together.

What is CSS Grid?

The CSS Grid Layout is the logical result of realizing that there were some advantages to using the structure of tables to build the layout for your webpages. Blasphemy! you say? Tables are meant for data! Using them for layout is heresy of the highest order! Not to fret, my fellow disciples of semantic HTML: the Grid layout lets us achieve the same concept of rows and columns, but entirely via CSS.

The best way to use CSS Grid Layout is within the overall structure of your site, though that doesn’t mean it can’t be used in smaller cases. It helps to divide the page into sections based on rows and columns, then control the placement and sizing of the grid items placed into those sections.

These are the three most important bits to remember about CSS Grid::

1. 2-dimensional: it handles columns AND rows
2. Layout first: focuses on the placement of the content within the set layout
3. Overlapping grid items: this is very easy and doesn’t require messing with odd positioning hacks.

If you’re a visual person like me, here’s a super-simple example:

HTML:

<div class="grid-container">
    <div class="grid-item">One</div>
    <div class="grid-item">Two</div>
    <div class="grid-item">Three</div>
    <div class="grid-item">Four</div>
    <div class="grid-item">Five</div>
    <div class="grid-item">Six</div>
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // number of columns, and the fraction of the available space each column should fill
    grid-gap: 10px; // The gutter, or space between grid items
    grid-auto-rows: minmax(100px, auto); // automatically creates the number of rows needed to fit all of the grid items
}

Et voilà. The most basic of grids:

What is Flexbox?

Relating Flexbox to CSS Grid makes a lot more sense when you use the full CSS Module name: Flexible Box Layout. Simply stated, it’s another way of creating a layout. With Flex, your options are rows OR columns. Its intent is to control the layout of items in one direction, along with the spacing and sizing of those items.

Flexbox is more suited to creating smaller layouts as opposed to full page structure. It’s more flexible because once flex items wrap, each new line is considered its own flex container. That means the layout of each line automatically depends on the items within it, all without needing to match with other lines.

Here are three important bits to remember about Flexbox:

1. 1-dimensional – it handles columns OR rows
2. Content first – focuses on alignment and distribution of the content
3. Auto margins: can easily “push” an element away from its siblings 

And a super-simple example:

HTML:

<div class="flex-container">
    <div class="flex-item">One</div>
    <div class="flex-item">Two</div>
    <div class="flex-item">Three</div>
    <div class="flex-item">Four</div>
    <div class="flex-item">Five</div>
    <div class="flex-item">Six</div>
</div>

CSS:

.flex-container {
    display: flex;
    flex-flow: row; // the direction your flex items should flow in
    justify-content: space-between; // how the flex items are placed within the container
}

This gives you a simple flex row, with items spaced evenly.

But You Said We Could use CSS Grid and Flexbox Together!

Yes! Using CSS Grid and Flex in conjunction with each other can lead to some awesome, easy-to-maintain layouts.

One very common use-case involves setting the page structure with a grid and styling positioning navigation items with flex. In this example, we’re using a 12-column grid to lay out the major sections of the page, and Flexbox’s ease of vertical alignment and ability to easily push one Flex item away from its siblings.

HTML:

<div class="grid-container">
    <div class="grid-item flex-container header">
        <span class="flex-item logo">Logo</span>
        <span class="flex-item">Nav Item 1</span>
        <span class="flex-item">Nav Item 2</span>
        <span class="flex-item">Nav Item 3</span>
        <span class="flex-item">Nav Item 3</span>
    </div>
    <div class="grid-item sidenav">Sidenav</div>
    <div class="grid-item content">Content</div>
    <div class="grid-item footer">Footer</div>
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}

.flex-container {
    display: flex;
    align-items: center;
}

.header {
    grid-column: 1 / 13;
}

.logo {
    margin-right: auto;
}

.sidenav {
    grid-column: 1 / 3;
}

.content {
    grid-column: 3 / 13
}

.footer {
    grid-column: 1 / 13;
}

So, Should I use CSS Grid or Flexbox?

The answer is everyone’s favorite: It depends. 

Do you need your items to align with each other in both rows and columns? Then CSS Grid is your friend. Are you focused mainly on getting your content to be distributed evenly in one direction? Go for Flexbox. In the end, both are huge steps forward from floats, absolute positioning, and tables for layout. It’s all about using what makes your life easier, your layout more robust, and your codebase easier to maintain.

Want to know more about CSS Grid and/or Flexbox or have questions for our experienced front-end development team? Contact us below.