3 ms·

Flex seems more flexible to me than CSS Grid.

creyes 8y ago
A combination of both is really ideal. CSS Grid seems great for full screen things and FlexBox is really great at laying out small components.
- aldoushuxley001 8y ago
  Flex has better browser support though, so I still like to stick to Flex instead of Grid.
ben_jones 8y ago
Agreed, since learning flexbox I haven't touched css grid albeit I've only done front-end for small internal tools and hobby projects recently.
tgroutars 8y ago
They actually made another game to learn flexbox https://flexboxfroggy.com/ https://flexboxfroggy.com/
- maximp 8y ago
  This is how I've learned enough flexbox to get by, and it was a total blast
bgorman 8y ago
They are complementary technologies. CSS Grid really shines for doing the "full page layout" portion of websites. One really useful feature of CSS grid is that it composes really well with media queries, so you can create responsive websites really easily by just defining different grid area layouts for various screen sizes.
devxpy 8y ago
Is it just me or does everyone just eventually resorts to "trying everything until it works" with CSS layout? > Flex seems more flexible to me than CSS Grid. Any day :)
- adrianhel 8y ago
  My first advice to anyone regarding CSS: Don't just slap on more rules to get things working. Gain an intuition and you'll be so much happier and produce much better layouts. But yes, I am also under that impression.
reaperducer 8y ago
Flex seems more flexible to me than CSS Grid It's not an either/or proposition. I sometimes use both at the same time, depending on the project. Usually it's Grid for the big picture container layout stuff, and then Flexbox for laying out each individual portion. I'll be happy when another 15% of my visitors upgrade to better browsers so I can use grid on my biggest project. Right now Flexbox fails with orphan elements, even when using margin: auto;, but this would be a perfect place to use Grid.
fiddlerwoaroof 8y ago
Honestly, my experience with both flex and grid is that they are 80% solutions and the easiest ways to get the other 20% is to rewrite everything using floats and `display: block`
fro0116 8y ago
My only major pain point working with flexbox have been gutters. With flexbox, implementing gutters often involves some kind of hack involving negative margins, which is both inelegant and can sometime result in strange layout issues in my expereince. For instance, if you want to render a dynamic list of items that wraps if the number of items don't fit in 1 row using flexbox, and want to add equal vertical spacing to each row _only when the list wraps_ (i.e. without introducing any extra spacing on the first row), you'd need to add a margin-top to every item and then add a negative margin-top to the flex container to counteract that extra margin. I originally found out about this trick in this StackOverflow question: https://stackoverflow.com/a/30891910 https://stackoverflow.com/a/30891910. I'd love to be enlightened if anyone know of a better way of implementing this using flexbox. Similarly, adding gutters for horizontal spacing between columns involves adding 1/2 the gutter width as margins to each item on both sides, and then setting negative margins of 1/2 the gutter width on both sides of the container. With grid, we can simply set the row-gap and column-gap properties on the grid container without any additional ceremony.

A combination of both is really ideal. CSS Grid seems great for full screen things and FlexBox is really great at laying out small components.

aldoushuxley001 8y ago
Flex has better browser support though, so I still like to stick to Flex instead of Grid.

ben_jones 8y ago

Agreed, since learning flexbox I haven't touched css grid albeit I've only done front-end for small internal tools and hobby projects recently.

tgroutars 8y ago

They actually made another game to learn flexbox https://flexboxfroggy.com/ https://flexboxfroggy.com/

maximp 8y ago
This is how I've learned enough flexbox to get by, and it was a total blast

bgorman 8y ago

They are complementary technologies. CSS Grid really shines for doing the "full page layout" portion of websites. One really useful feature of CSS grid is that it composes really well with media queries, so you can create responsive websites really easily by just defining different grid area layouts for various screen sizes.

devxpy 8y ago

Is it just me or does everyone just eventually resorts to "trying everything until it works" with CSS layout? > Flex seems more flexible to me than CSS Grid. Any day :)

adrianhel 8y ago
My first advice to anyone regarding CSS: Don't just slap on more rules to get things working. Gain an intuition and you'll be so much happier and produce much better layouts. But yes, I am also under that impression.

reaperducer 8y ago

Flex seems more flexible to me than CSS Grid It's not an either/or proposition. I sometimes use both at the same time, depending on the project. Usually it's Grid for the big picture container layout stuff, and then Flexbox for laying out each individual portion. I'll be happy when another 15% of my visitors upgrade to better browsers so I can use grid on my biggest project. Right now Flexbox fails with orphan elements, even when using margin: auto;, but this would be a perfect place to use Grid.

fiddlerwoaroof 8y ago

Honestly, my experience with both flex and grid is that they are 80% solutions and the easiest ways to get the other 20% is to rewrite everything using floats and `display: block`

fro0116 8y ago

My only major pain point working with flexbox have been gutters. With flexbox, implementing gutters often involves some kind of hack involving negative margins, which is both inelegant and can sometime result in strange layout issues in my expereince. For instance, if you want to render a dynamic list of items that wraps if the number of items don't fit in 1 row using flexbox, and want to add equal vertical spacing to each row _only when the list wraps_ (i.e. without introducing any extra spacing on the first row), you'd need to add a margin-top to every item and then add a negative margin-top to the flex container to counteract that extra margin. I originally found out about this trick in this StackOverflow question: https://stackoverflow.com/a/30891910 https://stackoverflow.com/a/30891910. I'd love to be enlightened if anyone know of a better way of implementing this using flexbox. Similarly, adding gutters for horizontal spacing between columns involves adding 1/2 the gutter width as margins to each item on both sides, and then setting negative margins of 1/2 the gutter width on both sides of the container. With grid, we can simply set the row-gap and column-gap properties on the grid container without any additional ceremony.