Editor’s note: This article comparing Flexbox and CSS Grid was last reviewed and updated on 6 January 2023.
The way you display your content can say a lot about you or your company. Having high-quality content and knowing how to display it in a clean way that your user can understand is important.
So how do we choose how we’re going to show our content? The responsibility of showing our content in a pretty and decent way is through our CSS code.
CSS has always been one of the most important parts of web development, we’ve been building and improving new ways to work with it since the beginning of browsers. A few years ago, creating web page layouts was a very hard job. We were using some CSS properties such as float
, positioning a lot of elements with position
, and inline-block styling.
Now, we don’t depend on those properties anymore to create our web pages, it’s getting easier now to create different experiences on our web pages. The evolution of the web has come to a point that now we have two CSS layout systems that we can work with: Flexbox and CSS Grid.
Thinking about which layout system is best for your project early can really help you achieve a better result and well-written CSS code. In this post, we will look at when to use Flexbox and when to use CSS Grid. It’s not a very hard question to answer but it can save you some time in the future with maintenance and refactoring.
Jump ahead:
Flexbox was introduced in 2009 as a new layout system, with the goal to help us build responsive web pages and organize our elements easily, and, since then, it’s gained more and more attention. It turns out it’s now used as the main layout system for modern web pages.
Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code.
Before we get into when you should use Flexbox and Grid, let’s go over a few properties that make these two concepts stand apart from each other. If you want to go into further properties of Flexbox and Grid, or how to start out with them, you can check out these beginner friendly articles on Flexbox and Grid, respectively.
Say we have a <div>
in our HTML that serves as a container for three child elements. All you need to do is create a flex container using the display: flex
property. After that, every element that you have inside that flex container turns into a flex item.
The corresponding code would be:
<div class="container"> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> </div> .container{ display: flex; }
In our flex container, we could decide to set a direction for the items in our container. The most frequently used flex directions are row
and column
. Our corresponding CSS would look like this:
.container{ flex-direction: row | column; }
In some cases, flex-direction
could be set to row-reverse
or column-reverse
. One important thing to note under flex directions is the concept of axes. Depending on the flex direction, we can have a main axis and a cross axis. In the case where the flex-direction is row, the main axis is in the horizontal direction, and the cross axis is in the vertical. The opposite is of the case when the flex-direction is column. This will be useful when we look into aligning:
Another interesting property is flex-wrap
, which lets items in a flex container move on to the next line when there is no more room:
.container{ flex-wrap: wrap | nowrap| wrap-reverse; }
The problem with flex-wrap
, however, is that when the items wrap, they form their own flex line below the ones above, and so are not perfectly aligned with the items above them. You see that item4
and item5
spread out to fill all the room below the elements above them.
Flexbox has a lot of other properties that we can use to create awesome things. We can order the elements the way we want, reverse the order of elements, determine if our elements should grow or shrink, etc. One concept that makes Flexbox so useful is the power of alignment of items within the flex container.
To demonstrate this, let’s look at a few alignment-related properties of Flexbox such as align-self
and justify-content
.
For example, let’s imagine that our container
div now has four elements, with the same width and height:
<div id="container"> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id="four">4</div> </div>
In our CSS, we can use align-self
to align these items within their container. That is, we can give a different alignment to each item:
#one{ align-self: flex-start | flex-end | center | stretch }
Instead of aligning each individual item, say we wanted to align all items together within the container. For that, we’ll use justify-content
. Let’s assume that instead of four, we have three items again in our container:
.container{ justify-content: flex-start | flex-end | center | space-between | space-around }
You can notice how easy it is to align content within flex containers. Whether it be the individual items within the container, or all the items together. The above features only show a few common properties of Flexbox, and how easy it is to manage small parts of your layout.
Now that we know that Flexbox is a one-dimensional layout system, let’s briefly learn about how CSS Grid works and the differences between these layout systems.
If Flexbox is a powerful layout system because it’s a one-dimensional system (meaning that we can work with rows or columns), CSS Grid is now considered the most powerful layout system available.
CSS Grid is a two-dimensional layout system, we can work with rows and columns together, which means that it opens a lot of different possibilities to build more complex and organized design systems, without having to fall back to some “hacky ways” that we were using in the past.
Let’s use the HTML snippet below, and see how we can get a grid layout out of it:
<div class="container"> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id="four">4</div> <div id="five">5</div> </div>
To define a grid container, all you need to do is pass a display: grid
property to your block element. Now you have a grid, so you should define how many rows and columns you want.
To create rows and columns, we use the grid-template-rows
and grid-template-columns
properties, and pass values that tell how much our grid items will span through the container:
grid-template-columns: 60px 60px; grid-template-rows: auto;
From above, we can see that our layout will be set to two columns, each occupying 60px of the container, and since there are five elements, we’ll have three rows spanning the entire container due to the auto
attribute:
Just like now, Grid also has some properties that let you align items within the container. An example is the justify-self
property. This property aligns a grid item within its cell, along the row axis:
#one{ justify-self: start | end | center | stretch }
Taking the first item in our grid container as an example:
It is worth noting that justify-self
is not the only alignment property that grid has. We could also use justify-content
, justify-items
, align-items
, and align-self
. You can easily notice that grid provides more flexibility when it comes to aligning and creating complex layouts.
Despite the many differences that Flexbox and Grid have, they do have some properties in similar.
The first and biggest thing they share in common is the fact that they are both used for layouts. Before, developers had to struggle with floats. With the help of Flexbox and Grid today, it is possible to easily create all sorts of complex layouts.
As for the properties that Flexbox and grid share, these include justify-content
, align-content
, align-self
and align-items
.
Now that we have seen how they work, we’ll emphasize the differences and best use cases for each tool.
When Flexbox was first released, we thought that it could be the best layout system to use to build our web pages, but it wasn’t.
Flexbox helped developers start to create more responsive and maintainable web applications, but the main idea of a one-dimensional layout system doesn’t make sense when you need to build a more complex layout design.
CSS Grid really came to help us build more complex layout designs using a two-dimensional way, using both rows and columns. We should aim to use both of them together, but for different purposes. For your layout, use CSS Grid, for alignment of your elements, use Flexbox.
To master and know exactly when you’re going to need and how to use CSS Grid, you should first learn the basics and how Flexbox works, because when you need alignment of elements in your application, it’s Flexbox that you’re going to want to use.
display: flex
and then define the flex-direction that we wantOf course, you can build your whole application using only Flexbox and get the same result as if you were building with CSS grid. But for a better CSS approach, to have a more concise, well-written, and maintainable application in the long-term, to create and fit your layout perfectly, the ideal method is to use CSS Grid.
grid-column
and grid-row
properties and you can have overlapping elements very easily. On the other hand, with Flexbox we still need to use some hacks such as margins, transforms, or absolute positioningBefore you decide which one you should use, don’t forget:
CSS Grid is for layout; Flexbox is for alignment.
Here’s an example of the right use of CSS Grid. Let’s imagine that we’re going to build a simple application, and the barebones of our applications is going to look a bit like this:
We have a header, an aside menu, main block content, and a footer. To create this layout using CSS Grid, we just need to create our elements:
<div id="container"> <header>Header</header> <aside>Aside</aside> <main>Main</main> <footer>Footer</footer> </div>
Now, create a grid container using display: grid
and then create some rows and columns.
We create our design very simply, without having to use hacks such as float
or positioning our elements, and without having to create many flex containers.
The best decision that you can take for your application in order to create a very decent and well-built web layout for your application is to use both together.
Let’s take our example and use both CSS Grid and Flexbox to show the power of both layout systems together. Inside our header
, we’re going to create three div
elements and align them in a row:
<header> <div>1</div> <div>2</div> <div>3</div> </header>
To do that, all we need to do is declare our header
a flex container using the display: flex
property, make the flex-direction a row using flex-direction: row
, and align the items:
Check out the corresponding Code Sandbox for this code. Feel free to play around with the code, to see how different you can make the layout look.
For now, our small web page looks like this:
For a major layout style, you could use CSS Grid, because it’s a two-dimensional layout system, and you can work with both rows and columns very easily. And for a more simple layout style, you can use Flexbox, a one-dimensional system, as it’s very helpful when working with rows.
In this article, we learned about the differences between CSS Flexbox and CSS Grid, how they work in modern browsers, and how we can use each one of them to accomplish different results in our CSS. We also demonstrated a use case where Flexbox and Grid can be used together.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowSOLID principles help us keep code flexible. In this article, we’ll examine all of those principles and their implementation using JavaScript.
JavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.
Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.
Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.
18 Replies to "When to use Flexbox and when to use CSS Grid"
Woow, Thanks a million for this perfect post.
Thank you for your explanation, one of the best i found on the internet. I have a concern on the css code for the grid explanation. Thank you and good work !
Fantastic article, thank you!
Great article, explains things well.
Having visual examples of what your css code would look like on a webpage would make this post pure gold.
Excellent article; too bad it fails accessibility tests; light orange type on a light grey background? Building readable websites is also our responsibility as web developers.
Really a helpful post!Thank you so much.
Very nice. I’m definately going to use this to up my layout game. One thing, though.
You really need to explain what’s going on with column and row values of “x / y”. You put it out there, but you didn’t explain what it means or how it works.
I don’t think that’s the point of this article. The point here is to understand layout using Grid and Flexbox.
This is the best article I’ve read about flex box vs CSS grid so far! Flexbox isn’t the right tool for every layout job, but as you’ve shown, it can often be made to work similarly, Grid too have advantages and disadvantages.
awesome article. I really read every word and untill the end for the first time. Thanks a lot!
I’ve always thought of grid this way but I wasn’t quite sure. It is really handy to use grid as layout since you can manage your layout much faster and more efficient rather than adding a row/col class to individual elements, which is often how you would work with flexbox.
The blog has removed my confusion about when and why we should use the two layouts.
Thanks for such a beautiful article.
Thanks for the great article do you mind if i translate this article in korean and post it on my blog ?
I will not be making any money out of your article make sure have referernce with it
Thanks
Thanks so much for reading! It’s our policy to politely decline requests to translate and republish our content.
“…another thing that’s very helpful in CSS grid, that we don’t have in Flexbox, is the gap property”
To my knowledge, Flexbox also has the gap property.
Flexbox kinda wins the race imho but you provided some valid points, thanks for that
Typo at the Grid explanation:
“since there are five elements, we’ll have three ‘columns’ spanning the entire container due to the auto attribute:”
‘columns’ should be ‘rows’
Good eye! Thanks!