For the longest time, layout systems in CSS were always a bit of a pain, as using tools like floats and tables was far from ideal. But, as these were the tools we had, we persevered. Then along came Flexbox and Grid, and the world of CSS layouts was changed forever by their ease of use and flexibility.

What is CSS Flexbox?

Flexbox is a powerful layout system designed for one-dimensional layouts. It helps us easily build responsive websites and elements.

Flexbox does this by allowing us to arrange items inside a container in either a horizontal (row) direction or a vertical (column) direction. Inside this container, we then have control over things like spacing, alignment, and order. For example, we can create a horizontal container with evenly spaced items using the code below.

This code will then produce an output like the one below, with three items evenly spaced across the container.

Try this Flexbox example on CodePen:

Configuring Flexbox

What we’ve looked at so far is a very basic example of Flexbox, but you can further configure it. Flexbox has a series of properties that you can use to control how it lays out your elements; however, some of the most commonly used are flex-direction, justify-content, align-items, and flex-wrap.

flex-direction

flex-direction, as you might have guessed, allows us to control the orientation in which the container displays its child items. As we mentioned earlier, this either has a default of row or column.

justify-content and align-items

When it comes to understanding justify-content and align-items, we first need to understand axes in Flexbox. There are two axes, the main axis and the cross axis.

The main axis is controlled by the flex-direction property. So, if we’re using flex-direction: row, the main axis is horizontal; if we’re using flex-direction: column, then it’s vertical.

The cross axis, as the name might suggest, is the axis that crosses the main axis. For flex-direction: row, the cross-axis would be vertical, and if we’re using flex-direction: column, then it would be horizontal.

Now that we understand axes in Flexbox, it’ll make understanding align-items and justify-content a lot simpler. Simply put, align-items controls the alignment of the items on the cross-axis. For example, if we use flex-direction: row, the cross-axis would be the vertical one. Therefore, align-items would place the items in the container at the top, middle, or bottom of the container along the vertical axis.

justify-content, on the other hand, handles the alignment of the items inside the container along the main axis. So, if we’re using flex-direction: row, the main axis would be the horizontal one. Therefore, justify-content would place the items in the container at the start, middle, or end of the container along the horizontal axis.

flex-wrap

Finally, to round out the most common Flexbox properties, we have flex-wrap, which, as the name suggests, controls whether the items inside the container will wrap to a new line or not. By default, they won’t wrap and will try to all fit on one line.

What is CSS Grid?

Grid, like Flexbox, is another CSS layout system. However, unlike Flexbox, Grid operates on a 2-dimensional grid system, which enables us to easily place items in and across the various columns and rows we define within the grid. This means that Grid is the most powerful and flexible CSS layout tool available to us today.

To get started with Grid, you have to define a container that will house all the items inside it. To define this container, we apply the display: grid property to the container element.

Once we have defined our grid, we can start defining columns and rows using grid-template-columns and grid-template-rows. After the columns and rows are defined, we can start placing items inside them using grid-row and grid-column, or, for simplicity, we can use grid-template-areas to define areas on the grid and place items within them.

Here’s a look at a basic 3*3 grid of items, each placed in a different section of the grid.

Try this Grid example on CodePen:

Configuring Grid

Much like Flexbox, Grid also has some unique properties we can use to configure how items are laid out inside the parent container. However, Grid also shares some properties with Flexbox, such as justify-content and align-items, which function similarly in both tools.

justify-items

justify-items is a Grid-specific configuration property that allows you to define the default justify-self for all the items inside the container. This means we can control how each item in the container aligns inside its own grid area.

Subgrid

When it comes to configuring Grid, I wouldn’t be doing Grid justice if I didn’t mention the relatively new subgrid value for grid-template-columns and grid-template-rows.

Subgrid can be quite an in-depth topic to cover fully, and probably warrants its own post exploring it. But, by assigning subgrid as the value to one (or both) of the mentioned properties, we’re creating a nested grid inside the parent grid using the parent’s tracks.

In our example below, we have a parent grid that has three columns and three rows. We then define a subgrid with two rows and utilize the parent’s columns via the subgrid value passed to grid-template-columns.

Try this Subgrid example on CodePen:

As you can imagine, the subgrid value opens up numerous possibilities and further enhances the flexibility and power of Grid as a layout tool.

Learn more about subgrid.

Grid vs Flexbox

CSS Grid and Flexbox are similar in many ways, as we’ve seen, but they also have some differences. Here is a table summarising some of those differences.

When to use them?

CSS Flexbox and Grid, as we’ve explored, share many similarities, which leads some developers to use them interchangeably. But this isn’t ideal, and there are scenarios where one excels over the other. So, when should you use them? Here is how I decide when to use Flexbox or Grid.

• Flexbox => 1-dimensional layouts
• Grid => 2-dimensional layouts

If I’m building a standalone component that only needs to control elements in one direction, like a navigation bar, then I’ll reach for Flexbox.

If I need to control the layout of elements in two directions, like placing that navigation bar on a page with other elements beside and below it, then I’ll reach for Grid.

Best practices

To conclude this post, I wanted to share some best practices for working with Flexbox and Grid.

1. Recognize when one tool is better suited for the job than another. If you find yourself creating more complex 2D layouts with Flexbox, it may be time to switch to Grid.
2. Use Grid for macro-layouts (how elements fit on the page) and Flexbox for micro-layouts (how elements position their children).
3. While it’s not always possible, plan your layouts in advance and determine where Grid or Flexbox will be most effectively used in your designs. A bit of preparation can go a long way.

In this post, we’ve looked at all things CSS Flexbox and Grid. What makes them similar, what makes them different, and ultimately, how to choose one over the other.

I hope you found this post helpful, and I encourage you to experiment with both layout methods and get to grips with them in your own projects so you can see their potential in action!

Thanks for reading.