Grid vs. Flexbox

Introduction:

as we know that now a day how flex and grid become very important to design our layout before that was very messy to make our layout appear as we want by making position, float ... etc.
now grid and flex makes it too easy
flex and grid sharing the same common features which makes it so confusing when to use flex and when to use grid and what is the difference between them.
so in this article, we will explain what is the difference between these two properties.

Differences:

1- the main important difference is that: we use flex in a one-dimensional layout (row or column) while grid using in two-dimensional layout (rows and columns)
For example :
Flex:
HTML:

CSS:

Output:

here in this example, we can see that flex has 2 rows but no actually its just one row but elements exceed 100% from parent width so it breaks into one another line this case only happening when we add (flex-wrap: wrap;) to the parent element
Grid:
HTML:

CSS:

Output:

here in the grid example what we have actually two columns and two rows so that is a two-dimensional layout

2-Grid is mostly defined on the parent element while flexbox most of the layout happens on the children:
For example :
Flex:
HTML:

CSS:

Output:

Grid:
HTML:

CSS:

Output:

3- Flexbox works from the content out while Grid works from the layout in:
Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line.
When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

4-Flexbox can push things away while that is not happening in Grid:
It’s a unique feature of flexbox that you can, for example, put margin-right: auto; on an element and, if there is room, that element will push everything else as far away as it can go. while grid item if it had margin-right: auto; it can't push other items away.
For example :
HTML:

CSS:

Output:

References:

• https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
• https://www.youtube.com/watch?v=RSIclWvNTdQ
• https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/
• https://blog.logrocket.com/flexbox-vs-css-grid/

Comments

[Eric]

Great post!
I use these handy cheat sheets all the time:
grid.malven.co
flexbox.malven.co

[NadaYousry]

Thanks alot for your comment and these wonderful sheets 👏

[Lorenzo]

Hello,
Can I add these two cheat sheets to my compilation?

The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀

DevLorenzo ・ Mar 2 ・ 15 min read

#productivity #webdev #beginners #javascript

Thanks

[Eric]

I don't see why not. I didn't make them btw.

[Lorenzo]

Ok, thank

[Poldini]

Thanks!

[jasontmjohnson]

Thanks for sharing.

[Temani Afif]

Flexbox also support the gap property: caniuse.com/flexbox-gap .. can be found in the following specification: drafts.csswg.org/css-align-3/#prop...

[NadaYousry]

thanks for this valuable information

[arvindsridharan]

This is a very good explanation of grid and flexbox. Well done!!

[NadaYousry]

Thanks alot

[arvindsridharan]

I am currently learning Cascading Style Sheets and Javascript. Looking forward to your expert advise.

[NadaYousry]

Thanks for your encouragement and I hope I'll be as you expect 🙏😊

[Reza Asghari]

Great

[NadaYousry]

Thanks

[Rodrigo Arantes]

Well done! thanks

[NadaYousry]

Thank you 😊

[Lathifahdhiya]

Thank you, this is really helpful for css beginners!

[NadaYousry]

Thank you

[Poldini]

Very helpful to point out that flex is more content focused and grid more structure focused. Thank you

[NadaYousry]

Great point thanks

[Omar Hassan]

bravo shokran 👏

[NadaYousry]

Thanks Omar 😊