3 ms·

Wow this is great. I could have really used some of these examples a few days ago. CSS grid combined with media queries feels like cheating to me. Am I missing

Wow this is great. I could have really used some of these examples a few days ago. CSS grid combined with media queries feels like cheating to me. Am I missing something big here, or is this all safe to use in 2022?

numlock86 4y ago
Media queries have been safe for over a decade. If you feel uneasy with grids and/or still want to support ancient Internet Explorer versions just use flexbox instead.
pseudosavant 4y ago
CSS Grid is that amazing. I hadn't looked into it much for a while because I had already adopted flexbox, but grid is so much better for most scenarios I encounter. CSS Grid + CSS Variables really take CSS to another level.
open-source-ux 4y ago
"Am I missing something big here, or is this all safe to use in 2022?" CSS Grid has been safe for use for a few years now (if you're supporting modern browsers). https://caniuse.com/mdn-css_properties_display_grid https://caniuse.com/mdn-css_properties_display_grid The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout). It's ironic that developers have rightly complained how cumbersome CSS layout has been in the past. Now we have CSS Grid - and yet developers still aren't using it.
- dgb23 4y ago
  I think the "issue" is that CSS grid is already powerful and expressive enough so that you don't really need something like Bootstrap/Bulma to get in the way. They would simply rename stuff and be a useless middleman. I don't think even utility/functional CSS frameworks like Tailwind do much with CSS grid (not sure). It's that good.
  - bob1029 4y ago
    This is my experience so far. Once I felt the total control over layouts at any size, I had zero fears about losing all the other benefits you get with css frameworks. I can figure out svg icons, modals, etc on my own. The #1 reason I used bootstrap up until now is to deal with complex layouts and breakpoints. Flexbox handles most other cases without much drama too. I am currently running a 100% vanilla JS+CSS stack for a responsive web app. I have never felt this much power before. Everything is so immediate and obvious now.
chiefalchemist 4y ago
This is worth the price ;) Aside from the Grid-centric lessons, the Grid v Flexbox is worth watching more than once. https://cssgrid.io/ https://cssgrid.io/

numlock86 4y ago

Media queries have been safe for over a decade. If you feel uneasy with grids and/or still want to support ancient Internet Explorer versions just use flexbox instead.

pseudosavant 4y ago

CSS Grid is that amazing. I hadn't looked into it much for a while because I had already adopted flexbox, but grid is so much better for most scenarios I encounter. CSS Grid + CSS Variables really take CSS to another level.

open-source-ux 4y ago

"Am I missing something big here, or is this all safe to use in 2022?" CSS Grid has been safe for use for a few years now (if you're supporting modern browsers). https://caniuse.com/mdn-css_properties_display_grid https://caniuse.com/mdn-css_properties_display_grid The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout). It's ironic that developers have rightly complained how cumbersome CSS layout has been in the past. Now we have CSS Grid - and yet developers still aren't using it.

dgb23 4y ago
I think the "issue" is that CSS grid is already powerful and expressive enough so that you don't really need something like Bootstrap/Bulma to get in the way. They would simply rename stuff and be a useless middleman. I don't think even utility/functional CSS frameworks like Tailwind do much with CSS grid (not sure). It's that good.
- bob1029 4y ago
  This is my experience so far. Once I felt the total control over layouts at any size, I had zero fears about losing all the other benefits you get with css frameworks. I can figure out svg icons, modals, etc on my own. The #1 reason I used bootstrap up until now is to deal with complex layouts and breakpoints. Flexbox handles most other cases without much drama too. I am currently running a 100% vanilla JS+CSS stack for a responsive web app. I have never felt this much power before. Everything is so immediate and obvious now.

chiefalchemist 4y ago

This is worth the price ;) Aside from the Grid-centric lessons, the Grid v Flexbox is worth watching more than once. https://cssgrid.io/ https://cssgrid.io/