DEV Community

Cover image for Grid vs. Flexbox
NadaYousry
NadaYousry

Posted on

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:
flex-html
CSS:
flex-css
Output:
flex-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:
grid-html
CSS:
grid-csspng
Output:
grid-outout
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:
flex-html
CSS:
flex-css
Output:
flex-output

Grid:
HTML:
grid-html
CSS:
grid-css
Output:
grid-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:
flex-html
CSS:
flex-css
Output:
flex-output

References:

Discussion (27)

Collapse
eric23 profile image
Eric

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

Collapse
nadayousry profile image
NadaYousry Author • Edited on

Thanks alot for your comment and these wonderful sheets πŸ‘

Collapse
jasontmjohnson profile image
jasontmjohnson

Thanks for sharing.

Collapse
lshiznit profile image
Poldini

Thanks!

Collapse
devlorenzo profile image
DevLorenzo
Collapse
eric23 profile image
Eric

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

Thread Thread
devlorenzo profile image
DevLorenzo

Ok, thank

Collapse
afif profile image
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...

Collapse
nadayousry profile image
NadaYousry Author

thanks for this valuable information

Collapse
arvindsridharan profile image
arvindsridharan

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

Collapse
nadayousry profile image
NadaYousry Author

Thanks alot

Collapse
arvindsridharan profile image
arvindsridharan

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

Thread Thread
nadayousry profile image
NadaYousry Author

Thanks for your encouragement and I hope I'll be as you expect πŸ™πŸ˜Š

Collapse
lshiznit profile image
Poldini

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

Collapse
nadayousry profile image
NadaYousry Author

Great point thanks

Collapse
lathifahdhiya profile image
Lathifahdhiya

Thank you, this is really helpful for css beginners!

Collapse
nadayousry profile image
NadaYousry Author

Thank you

Collapse
rodriggoarantes profile image
Rodrigo Arantes • Edited on

Well done! thanks

Collapse
nadayousry profile image
NadaYousry Author

Thank you 😊

Collapse
rezaasghari profile image
Reza Asghari

Great

Collapse
nadayousry profile image
NadaYousry Author

Thanks

Collapse
oomaar profile image
Omar Hassan

bravo shokran πŸ‘

Collapse
nadayousry profile image
NadaYousry Author

Thanks Omar 😊

Collapse
kopseng profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Info Comment hidden by post author - thread only accessible via permalink
Carl-Erik Kopseng • Edited on

Dev.to needs proofreaders. I had to read the opening sentence three times to unscramble it and since the rest of the paragraph continued in the same vein, I just couldn't be bothered reading past the opening. I appreciate the effort, but the rambling unedited verbal style just put me off. Grammar has value and not using versals means it's harder to understand when the sentence starts, so you lose the inner voice.

Collapse
nadayousry profile image
NadaYousry Author

Hello carl,
Thank you for your comment. I also believe that the language and grammar are very important for reading and understanding articles as you think you too. So thank you for your comment and I will work on it and develop it so that there are no mistakes in writing in the future

Collapse
kopseng profile image
Carl-Erik Kopseng

Hi, Nada. Thanks for your mature reply. I know it is a bit off-putting to have "grammar nazis" poke at your work, but I just wanted to disclose that I was acting under a misunderstanding of the professionality of Dev.to: I was under the impression that Dev.to was a curated site that invited people to write content. I was unaware that it was actually open to all to post whatever they wanted. Had I been aware of this earlier, I would not have the presumably harsh tone I might have come across as. It was more directed at Dev.to than yourself, as I thought they had an editorial process of some kind. Now that I know you were "a happy amateur" testing the waters, I am sorry for coming across as a bit abrasive. I know it is scary to post something in the techosphere. Good luck with your next endavours!

Thread Thread
nadayousry profile image
NadaYousry Author

There is no problem Carl,
Thanks for being understanding 😊

Some comments have been hidden by the post's author - find out more