Introduction

Some may tell you there is a debate on the use of Grid vs. Flexbox and whether or not one is superior to the other. The reality is much simpler - these are complementary tools that can work together, and each has its own place in the world of CSS.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Know when you might want to use Flexbox over Grid
  • Know when you might want to use Grid over Flexbox
  • Know when you might want to use the two together

Content First vs Layout First Design

One way to think about the different uses of Grid and Flexbox is to consider whether your design originates with the content, or from the overall layout. If starting with the content, and working from the smallest parts outwards, then a developer is using Content-First Design. This is a great opportunity to use Flexbox because of the flexibility it provides in manipulating code in one dimension - along either rows or columns.

If, however, a developer is given a specific overall layout to adhere to and needs explicit placement of elements in two dimensions, using both rows and columns, then Grid would be much better suited.

Content-First and Layout-First Design doesn’t mean that the developer should limit themselves to only using Flexbox or Grid individually! Let’s look at something that can happen when we attempt to create a one dimensional grid - a task many reserve for Flexbox.

See the Pen 1-Dimensional Grid | CSS Grid by TheOdinProject (@TheOdinProjectExamples) on CodePen.

It works and looks absolutely beautiful! However, if we have to move these individual boxes around in the future, doing so with Flexbox would be much simpler.

Combining Flexbox and Grid

If you have one-dimensional content, Flexbox can make it easier to control how that content is positioned in a Flex container. If, on the other hand, you want to accurately place content on a complex layout in two-dimensions, Grid can be simpler to use.

Say you want your overall layout to be a grid, but you want the grid items to act as flex parents. This way, the grid items can be moved around using the precise two-dimensional placement Grid allows for, while also allowing the content inside the grid items to be capable of freely moving around using Flex. Check out this example from CSS-Tricks.

See the Pen Combine Grid and Flexbox by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Closing opinion

This lesson includes recommendations, not the “right” or “wrong” way of using Flexbox or Grid. Ultimately, it comes down to personal preference and what a developer feels is easier for whatever the given task might be. At this point you have both of these tools in your toolbox and got a sneak peak at how they can be used together or one in place of the other. The best way to learn Flexbox and Grid is to build many projects with both of them and develop your own opinion about which to use in different circumstances.

Assignments

  1. If you haven’t already, read through the previously mentioned article by CSS-Tricks

  2. To look at many different use cases for Grid, have a look at this video by Wes Bos

  3. To gain some more insight on when to use Grid or Flexbox and why, read through this article

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

  • MDN wrote an in-depth article on the relationship between Grid and other layout methods here

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started
Thinkful Logo

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship