This article is going to discuss both CSS grid and Flexbox, how they work, and the situations where one solution should be used over the other.

Despite what the title suggests, CSS grid and Flexbox are not the same solution (ie. you’ll probably be using both on one project). For most projects, you will probably find yourself incorporating a bit of grid, and a bit of flex, as opposed to replacing one solution with the other. One does not replace the other.

With that out-of-the-way, the remainder of this article will attempt to help you understand which you should use, and when.

Flexbox

You're probably already familiar with Flexbox, but this is a way to lay out content horizontally or vertically.

You have your flex container, and within, you have your flex items. You can specify how these items are positioned in this container (horizontal OR vertical).

Take a look at this amazing article, Flexbox Cheetsheet, for a great visual representation of Flexbox.

CSS Grid

CSS grid is a newer way of laying out content, and it's better at some things than the lovely flex.

• Making actual, legit grids.
• Responsiveness (in some situations). That’s because it comes with auto layout, as well as minmax and repeat.
• Whole page layouts, read this. Easier to set up, more auto-responsiveness.
  

CSS grid is a grid based layout system (you guessed it). What this means is that it utilizes rows and columns, eliminating the need for positioning and float. As stated above, it also comes with built-in automatic responsive capabilities, minimizing your use of media queries.

The main concepts here are this:

• Use display:grid on a div or section to specify that all content in that container must abide by CSS grid rules
• You can then add grid-gap (think padding/margin between individual grid elements).
• You can specify the dimensions (in relation to the overall grid) with grid-column-start, and grid-column-end. Same goes for rows.
  

Obviously, the framework is a lot more complex than this description is making it out to be, and I definitely recommend checking out this tool which will help you learn CSS grid in no time:

https://learncssgrid.com

The Main Difference

Most resources get you to think about the difference between Flexbox and CSS grid and dimensions. Flexbox is a single dimension, whereas Grid is a two dimensional layout tool.

Flex, with it’s single dimension, means that you can easily layout items in a row OR column.

Grid, with it’s two dimensions, means that you can layout items in a row AND column.

Flexbox=alignment

Grid=layout

Keep In Mind, They Work Together

Keep in mind, that CSS grid and flex blocks are created to work together as well. A flex item can be a grid container, and a grid item can be a Flexbox container.

When Is X best?

Flexbox is best when you’re aligning elements. It’s also great if your design is content specific. Meaning, you’re not entirely sure what content is going to end up in your layout, but need whatever eventually does to just fit.

Grid is great if you’re building out entire page/major section layouts... like this:

Why This Article, Now?

Oxygen Builder is soon to publicly release version 3.7, and the main feature of it is the addition of CSS grid capabilities. This is long-awaited, and very welcomed by the community, due to all of the benefits mentioned above. Now, we can easily use Flexbox and CSS grid on any page built with Oxygen Builder. In the past, we need a third-party addons (or hardcoding) to get this done.

Here’s a look at how CSS Grid works in Oxygen Builder. In all honesty, the way they’ve set it up makes it incredibly easy to grasp:

Simply choose your grid columns and rows, then drag and drop (it snaps) to manipulate the layout.