Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I wouldn't call it more intuitive.
For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.
Flex is better if the individual elements should have some control over the layout, whereas grid is better if the container should be fully controlling the layout.
Another data point I use is that if I find myself adding a container for the sole purpose of layout, I realize that I should be using grid. That is one of the biggest wins of grid: you don't need to pollute your markup with nearly as many layout/presentation-only elements.
For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.
I guess I’m wondering why it’s any more complicated than:
* Flexbox is for formatting in one dimension (or axis)—a row or a column.
* Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid.
In fact, you can use flexbox and grid in the same layout, each doing its thing.
Are there any layout behaviors that are possible to achieve with flexbox but impossible with grid? Basically, setting aside inversion of control at the moment, does grid subsume flexbox?
Even the deconstructed pancake example in the posted article doesn't seem to be impossible with CSS grid but I haven't given it too much thought.
Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex.
I find CSS Grid easier to understand than Flex. I also think it's easier (arguably more logical) to start with Grid and then understand Flexbox and how fits in your Grid.
The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout, although Bootstrap 5 has opt-in CSS Grid). You could argue that CSS Grid makes frameworks redundant for layouts only.
Developers have rightly complained how cumbersome CSS layout has been in the past. It's ironic CSS Grid is available in all modern browsers but developers still aren't using it.
Not sure, but grid seems to be not very framework-able. Bootstrap frees you from choosing geometry by traditional grid system where you just class-mark columns and that's it. CSS grid is a whole new ~sublanguage that you have to master.
code_biologist|3 years ago
Flex is better if the individual elements should have some control over the layout, whereas grid is better if the container should be fully controlling the layout.
Great 20min tutorial vid with examples and details on the above: https://www.youtube.com/watch?v=3elGSZSWTbM
sodapopcan|3 years ago
Another data point I use is that if I find myself adding a container for the sole purpose of layout, I realize that I should be using grid. That is one of the biggest wins of grid: you don't need to pollute your markup with nearly as many layout/presentation-only elements.
bobthepanda|3 years ago
You can nest flex such that it acts in a 2D way but it’s a bit annoying
alwillis|3 years ago
I guess I’m wondering why it’s any more complicated than:
* Flexbox is for formatting in one dimension (or axis)—a row or a column.
* Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid.
In fact, you can use flexbox and grid in the same layout, each doing its thing.
dwohnitmok|3 years ago
Even the deconstructed pancake example in the posted article doesn't seem to be impossible with CSS grid but I haven't given it too much thought.
open-source-ux|3 years ago
I find CSS Grid easier to understand than Flex. I also think it's easier (arguably more logical) to start with Grid and then understand Flexbox and how fits in your Grid.
The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout, although Bootstrap 5 has opt-in CSS Grid). You could argue that CSS Grid makes frameworks redundant for layouts only.
Developers have rightly complained how cumbersome CSS layout has been in the past. It's ironic CSS Grid is available in all modern browsers but developers still aren't using it.
wruza|3 years ago