4 ms·

I was very intrigued by the animated demos, but apparently the animation is not accomplished with CSS :( I definitely learned flexbox and thought to myself "th

I was very intrigued by the animated demos, but apparently the animation is not accomplished with CSS :( I definitely learned flexbox and thought to myself "this is good enough", and haven't really pushed myself to learn grids. It does seem like there's some reason to prefer grid [0], but it overall I've never needed to do anything that can only be done with grid (except data tables, for which I use actual tables). [0] https://css-tricks.com/css-grid-replace-flexbox/ https://css-tricks.com/css-grid-replace-flexbox/

wonger_ 2y ago
That's great that you've learned a tool that covers all your needs. I've only used grid for responsive image galleries like https://labs.jensimmons.com/2016/examples/image-gallery-grid-1.html https://labs.jensimmons.com/2016/examples/image-gallery-grid... or responsive cards like https://every-layout.dev/demos/grid-cards/ https://every-layout.dev/demos/grid-cards/. `grid-template-columns` is good to learn. `grid-gap` is convenient. Flexbox seems to handle everything else. But I'm still iffy about grid template areas. The article makes a case for easily adjusting layouts per breakpoint, or "for team members who might need to change a layout." Maybe I'm just not the target audience.
- bobthepanda 2y ago
  Grid template areas is very similar to traditional print layouts that are constrained with both a width and height. If you need something like grid-auto rows it is less useful. But what’s nice about it is that, if you want them, grid areas are extremely declarative. With non-area templating, you are defining the layout based on the items, and that can be challenging.
- yurishimo 2y ago
  If you can target (somewhat) modern browsers, then you can also use `gap` with Flexbox. Works great! https://caniuse.com/mdn-css_properties_gap https://caniuse.com/mdn-css_properties_gap (no IE 11 support)
higgins 2y ago
A fun tool for grid learning: https://cssgridgarden.com/ https://cssgridgarden.com/
lenkite 2y ago
"No, Flexbox isn't "good enough" https://www.youtube.com/watch?v=MWWcZzossc8 https://www.youtube.com/watch?v=MWWcZzossc8
sensanaty 2y ago
Flex is good enough for most things, but grid has its place. Responsive grids (think of those 3 column card layouts that shrink to a single card per row layout on small screens), page layouts like dedicated sidebar areas, resizable elements that should stick to a certain layout despite the resize, etc. Nothing stopping you from using both as necessary, combined it's a very strong layout tool

wonger_ 2y ago

That's great that you've learned a tool that covers all your needs. I've only used grid for responsive image galleries like https://labs.jensimmons.com/2016/examples/image-gallery-grid-1.html https://labs.jensimmons.com/2016/examples/image-gallery-grid... or responsive cards like https://every-layout.dev/demos/grid-cards/ https://every-layout.dev/demos/grid-cards/. `grid-template-columns` is good to learn. `grid-gap` is convenient. Flexbox seems to handle everything else. But I'm still iffy about grid template areas. The article makes a case for easily adjusting layouts per breakpoint, or "for team members who might need to change a layout." Maybe I'm just not the target audience.

bobthepanda 2y ago
Grid template areas is very similar to traditional print layouts that are constrained with both a width and height. If you need something like grid-auto rows it is less useful. But what’s nice about it is that, if you want them, grid areas are extremely declarative. With non-area templating, you are defining the layout based on the items, and that can be challenging.
yurishimo 2y ago
If you can target (somewhat) modern browsers, then you can also use `gap` with Flexbox. Works great! https://caniuse.com/mdn-css_properties_gap https://caniuse.com/mdn-css_properties_gap (no IE 11 support)

higgins 2y ago

A fun tool for grid learning: https://cssgridgarden.com/ https://cssgridgarden.com/

lenkite 2y ago

"No, Flexbox isn't "good enough" https://www.youtube.com/watch?v=MWWcZzossc8 https://www.youtube.com/watch?v=MWWcZzossc8

sensanaty 2y ago

Flex is good enough for most things, but grid has its place. Responsive grids (think of those 3 column card layouts that shrink to a single card per row layout on small screens), page layouts like dedicated sidebar areas, resizable elements that should stick to a certain layout despite the resize, etc. Nothing stopping you from using both as necessary, combined it's a very strong layout tool