CSS Flexbox vs Grid layout
Understanding the differences between the two CSS layout models.
Flexbox and Grid are two CSS layout models that can be used to create complex web application layouts with just a couple of CSS rules.
This tutorial will help you understand the differences between Flexbox and Grid CSS layout models and a recommendation on when to use one over the other.
Let’s start with learning how the Flexbox layout model works, then continue to how the Grid layout model works.
💡 As an aside, if you want to apply your CSS styling rules across multiple projects, you might want to consider using tools such as Bit. With Bit, you can encapsulate styling rules into independent components that can be reused across projects.
Learn more here:
How CSS Flexbox layout works
The Flexbox (or Flexible Box) layout model is a one-dimensional CSS layout model that allows you to create responsive layouts for your web application.
The key feature of the Flexbox model is that it adjusts the layout of your web page automatically based on the size of your content. You only need to define the direction and the wrap behavior of the Flexbox with the flex-direction and flex-wrap properties.
The flexibility of the Flexbox model allows you to distribute unused space between elements that are vertically or horizontally aligned.
Let’s see an example of the Flexbox model in action. First, suppose you have a container <div> element with five child elements as shown below:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<style>
.item {
background-color: lightblue;
padding: 1rem;
}
</style>The inline <style> tag above is used to help you see the items clearly. Currently, the elements are rendered as follows:
To enable the flexbox layout in your elements, you need to add the CSS display:flex property to your container element as follows:
.container {
display:flex;
gap: 20px;
}With the above CSS, all children of the container element will use the flex behavior for their display. The gap property is added to add some gap between the rows and columns.
In the same container element, you can define the flex-direction property to control the direction of the content:
.container {
display: flex;
gap: 20px;
flex-direction: row;
}The flex-direction:row property will lay out the content horizontally, while flex-direction:column will stack the content vertically
The layout of your HTML should look like this now:
Next, there’s also the flex-wrap property that defines the wrapping behavior of the content that is laid out horizontally.
With the flex-wrap property, your content will wrap into the next line when the screen size becomes too small to contain all child elements in the same line:
.container {
display: flex;
gap: 20px;
flex-direction: row;
flex-wrap: wrap;
}Let’s adjust the content of the HTML page and add a longer text content for the first item:
<div class="container">
<div class="item">
This is a placeholder text to make the column larger. It will show you how the flexbox model adjusts the page item layout based on the size of the content.
</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>Take a look at the following example and notice how the Flexbox created a second row as you make the browser smaller:
The Flexbox model allows you to expand the items to fill up the available row space by using flex-grow property.
.item {
background-color: lightblue;
padding: 1rem;
flex-grow: 1;
}By adding the flex-grow property to the item class, you will find the second-row items to expand and fill up the available row space as you make the browser width smaller
Notice how the second column is much smaller than the rest of the column in the following example:
Now that you’ve learned how the Flexbox layout works, let’s continue with learning how the CSS Grid layout works.
How CSS Grid layout works
The CSS Grid layout allows you to create a two-dimensional layout model that is made of rows and columns. It allows you to create a much more rigid layout for your web page that doesn’t change based on the content size.
To help you understand the difference between CSS Flexbox and Grid layout, let’s use the same example above where you have one container element with five children elements.
As you already see above, the Flexbox model allows your content to shape the layout of the web page. If one of your items has a bigger size, then the entire layout would flex to accommodate the different sizes of the child elements.
But what if you want a strictly defined layout where each row has three columns no matter the size of the item?
The Flexbox model doesn’t have the properties to strictly control the layout of the items. To produce a row with three columns, you need to calculate the width of each child element yourself.
Since we have a 20px gap between each element, Let’s calculate the width for each item element as shown below:
.item {
width: calc((100% / 3) - 60px);
background-color: lightblue;
padding: 1rem;
}Now you should have a three columns layout as shown below:
The child items above don’t really fill the whole width of the row because there’s still available space on the right side.
But if you add the flex-grow:1 property to the item class, then the two items on the second row will expand to fill the space, breaking the three-column layout.
This is where the Grid layout comes in. The ability to control the placement of items in a two-dimensional layout helps you to precisely define how your webpage should look.
The following CSS should do the job:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap:20px;
}
.item {
background-color: lightblue;
padding: 1rem;
}Now your elements will always be displayed in a three-column layout even when there are only 2 items in the row:
The Grid layout is more rigid and it doesn’t allow the expanding behavior of the flex-grow property to fill up the available row space.
When to use Flexbox or Grid layout for your web application
Now that you’ve learned how both Flexbox and Grid model works, it’s time to learn when to use one or the other for your web project.
The main difference between the Flexbox and Grid layout is that Flexbox creates content-first design while Grid creates layout-first design.
The Flex model looks at your content and then tries to adjust the layout to better fit the whole content on the screen, while the Grid model provides more strict control over the layout that ignores the size of your content.
But rather than thinking of them as competing technologies, you can think of Flexbox and Grid Layout as complementary technologies that you can use together to build a complex web application layout.
You can use the Grid layout to define the following layout:
With the following HTML markup:
<div class="container">
<header>Header</header>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>Followed with the CSS style below:
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 0.4fr;
grid-template-rows: 1fr 2fr 1fr;
grid-template-areas:
"header header"
"main aside"
"footer footer";
}
header {
grid-area: header;
background-color: lightblue;
}
main {
grid-area: main;
background-color: yellow;
}
aside {
grid-area: aside;
background-color: lightpink;
}
footer {
grid-area: footer;
background-color: lightgreen;
}Then, you can use the Flexbox layout for aligning the items inside each of those container elements. One common example of using the Flexbox model is to align the <nav> element items as follows:
<header>
<nav>
<ul class="navbar">
<li>Home</li>
<li>Profile</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>Next, you need to style the above elements using the following style:
.navbar {
display: flex;
list-style-type: none;
justify-content: space-around;
}The result will be as follows:
This is what developers mean when they say that Grid is used for creating the whole page outline while Flexbox is used for the details.
When you have a loosely defined layout that adapts to the size of your content, it’s recommended to use Flexbox. But when you have a fixed page layout, then it’s better to use the Grid model.
Build better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →
Conclusion
The Flexbox layout allows you to create a one-dimensional layout where you can easily expand or shrink your element sizes depending on the available space, but it’s hard to define a strictly three-column layout using the same model.
The Grid layout allows you to control the placement of your items in a two-dimensional layout, but it’s hard to expand two columns to fill the space of a three-column layout as previously explained.
Both Flexbox and Grid layout models are built-in CSS layout models that you can use to develop responsive layouts for your web application. The models are created for different purposes, and some things are easier to do with one model over the other.
You are free to use one of them, both, or neither depending on the requirement of your web project.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
