Perhaps you are a beginner to CSS and wondering if you should use flex
or grid
for your layout, or perhaps you have heard the popular statement saying to use flex
for 1D layout and grid
for 2D layout, you have come to the right place.
This article will show you the difference between flex
and grid
and when to use which, so you can confidently use the suitable one for your project!
Debunking myths ๐๐
Let's start by debunking the common myth about flex
and grid
being limited to 1D & 2D layouts.
We would be using the following as base HTML:
<div class="container">
<div>
Lorem, ipsum.
</div>
<div>
Lorem ipsum dolor sit amet consectetur.
</div>
<div>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Facilis.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
</div>
<div>
Lorem, ipsum dolor.
</div>
</div>
And add the following CSS to make the bounds of the elements visible:
.container {
border: 1px solid #000;
}
.container > div {
border: 1px solid #000;
}
This is what we get:
2D Layout with Flex
On adding display: flex
to the CSS
.container {
display: flex;
}
The elements align themselves in a row.
Plugging in one more property to the CSS
.container {
display: flex;
flex-wrap: wrap;
}
The elements that cannot be fitted in the first line jump to the next line & the myth that flex
can be used for 1D layout only goes down the drain.
1D Layout with Grid
Even though adding display: grid
to the CSS, changes nothing,
.container {
display: grid;
}
As soon as we add grid-auto-flow: column
, the elements align themselves in a row.
And we have debunked this myth too!
So when should you actually use flex or grid? ๐คจ
CSS grid
focuses on precise content placement. Each item is a grid
cell, lined up along both horizontal and vertical axis. If you want to accurately control the position of items within a layout, CSS grid
is the way to go.
Whereas, flexbox
focuses on content flow rather than content placement. Widths (or heights) of flex
items are determined by the content of the item. Flex
items grow and shrink according to their inner content and the available space.
With the flex-wrap
, you might have noticed that the elements only take up as much space as they require.
That is not the case for the grid
. On adding the following CSS:
.container {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
We find that all the elements have the same width, regardless of their content. They also share the same height as all the elements in the particular row.
Use Cases ๐ฌ
Flexbox
The ideal use case for flexbox
would be when you want to display items without taking up equal space, like in a navbar.
Grid
grid
can be used to display items like cards, where each element should have equal spacing.
It can also be used to create masonry layouts, where the items are laid out in a grid
, but the items expand beyond a single row/column, which can be done by adding a few CSS properties to the child elements:
.grid-parent .child-2-by-2-tile {
grid-column: span 2;
grid-row: span 2;
}
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
Follow me on Instagram to check out what I am up to recently.
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Top comments (10)
Another pro tip is that you can mix CSS Grid with Flexbox and vice versa. There is no need to stick to one. I don't see this mentioned enough. I don't know if this is because it is a given or if this is because this is one of those things you only eventually realise as you work with CSS.
Well said man. Just use any one that solves the problem at hand easily.
Exactly!! I second this.
Both for me are very useful. Flex for some elements, and Grid for elements like you presented.
I don't even make a VS between them, because both are useful. ๐
You need both this flex vs grid discussions get annoying people need to get educated about this.
I like to us Flex for easy stuff like section with two sides or navbare,
Grid for complex system.
In summary, they both excel in different areas and can be used together if you want.
good luck
Some comments may only be visible to logged-in visitors. Sign in to view all comments.