

CSS Flexbox vs Grid layout
source link: https://blog.bitsrc.io/css-flexbox-vs-grid-layout-5ae41e28d1d2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.
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.
Learn More
Recommend
-
39
CSS Grid has taken over the world of web design since its introduction. It’s cool and awesome. There are plenty of tutorials, blogs an...
-
17
My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web....
-
12
-
20
Notes on CSS Grid Layout 10 May 2016 ・ category: notes In preparation of the
-
18
CSS Grid Layout Module Level 3↑ → CSS Grid Layout Module Level 3 Editor’s Draft, 22 October 2020
-
11
Published on 6 April 2021 in css Use case comparison between CSS Grid and Flexbox Responsive design is a must-have in web design right now. And that c...
-
8
Difference between CSS Grid and Flexbox Reading Time: 5 minutes The way you display your content on can say a lot about yo...
-
10
Learning CSS Layout with Flexbox Froggy I’ve crea...
-
11
Writer: Muhammed Arslan Sarwar Introduction Flexbox helps in creating one-dimensional layouts through space distribution and alignment capabilities. Flexbox makes it easier to design responsive layouts wit...
-
9
Flex Luthor, a Little CSS Flexbox Layout Helper February 25, 2023 #3 Popular Tagged:
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK