6 ms·

Probably a cliché question at this point but isn't all of this solved more easily via flexbox?

kevsim 2y ago
The main reason I tend to reach for grid is responsiveness. Makes it way easier to change the layout at different screen sizes.
arcanemachiner 2y ago
Flexbox -> 1-dimensional layouts Grid -> 2-dimensional layouts That being said, I use Flexbox for pretty much everything.
- rasso 2y ago
  That‘s a very popular over-simplification. A better one would be: Flexbox -> the children define the size Grid -> the parent is in control
- reactor 2y ago
  For me its: Flexbox -> Content first, Layout second. Grid -> Layout first, Content second.
rasso 2y ago
Kevin Powell has a few great videos on YT comparing flexbox to grid. Grid can be very powerful if you want overlapping grid areas. Something that was previously only possible using absolute positioning. Also, auto-fit and auto-fill
emadda 2y ago
One thing flex cannot do well is white space: how do you leave a gap of content without spacer divs? This becomes more complicated when the number of divs is dynamic as flex determines position based on siblings. With grid you already have defined the “layout”, and you are just placing the div into the correct position. Grid does that in both axis too. So although you may be able to kind of replicate the 1d version with flex, it becomes much harder to align in 2D. I wrote an article about this: https://cssprinciples.com/3/grid/ https://cssprinciples.com/3/grid/
- jdthedisciple 2y ago
  gap works with flexbox I believe .flex { display: flex; gap: 8px; }
  - emadda 2y ago
    I mean gaps of white space that are part of the design and could possibly host content for different app states (not uniformly distributed between flex items).
bob1029 2y ago
I typically look at grid as the outermost container. It is very good at dealing with coarse layout concerns because you can constrain on both dimensions and define a layout per media query (or whatever). I've never been in a situation where nesting grids makes sense. Nesting flexbox obviates the need for grid in most cases.
nsonha 2y ago
not at all, the wet dream of css is to be able to layout just with css and only semantic markup, to which flexbox falls short sometimes because you need to add non-semantic elements (columns and rows).

The main reason I tend to reach for grid is responsiveness. Makes it way easier to change the layout at different screen sizes.

arcanemachiner 2y ago

Flexbox -> 1-dimensional layouts Grid -> 2-dimensional layouts That being said, I use Flexbox for pretty much everything.

rasso 2y ago
That‘s a very popular over-simplification. A better one would be: Flexbox -> the children define the size Grid -> the parent is in control
reactor 2y ago
For me its: Flexbox -> Content first, Layout second. Grid -> Layout first, Content second.

rasso 2y ago

Kevin Powell has a few great videos on YT comparing flexbox to grid. Grid can be very powerful if you want overlapping grid areas. Something that was previously only possible using absolute positioning. Also, auto-fit and auto-fill

emadda 2y ago

One thing flex cannot do well is white space: how do you leave a gap of content without spacer divs? This becomes more complicated when the number of divs is dynamic as flex determines position based on siblings. With grid you already have defined the “layout”, and you are just placing the div into the correct position. Grid does that in both axis too. So although you may be able to kind of replicate the 1d version with flex, it becomes much harder to align in 2D. I wrote an article about this: https://cssprinciples.com/3/grid/ https://cssprinciples.com/3/grid/

jdthedisciple 2y ago
gap works with flexbox I believe .flex { display: flex; gap: 8px; }
- emadda 2y ago
  I mean gaps of white space that are part of the design and could possibly host content for different app states (not uniformly distributed between flex items).

bob1029 2y ago

I typically look at grid as the outermost container. It is very good at dealing with coarse layout concerns because you can constrain on both dimensions and define a layout per media query (or whatever). I've never been in a situation where nesting grids makes sense. Nesting flexbox obviates the need for grid in most cases.

nsonha 2y ago

not at all, the wet dream of css is to be able to layout just with css and only semantic markup, to which flexbox falls short sometimes because you need to add non-semantic elements (columns and rows).