6 ms·

What are peoples' opinions whether CSS Grid will replace Flexbox usage in a lot of simple layout cases?

ahoy 10y ago
The general thinking is * use CSS Grid for layout in 2 dimensions. Page level layout essentially * use Flexbox for layout in 1 dimension. "module" level layout. These are not hard and fast rules, like much in CSS.
- gsnedders 10y ago
  Essentially, with what I've done with Grid, my opinion is Flexbox makes the 1D case simpler than the equivalent thing with Grid. AFAICT, this is the prevailing view the reason for the above.
- konschubert 10y ago
  I am really confused with CSS grid. How does it adjust to smaller screen sizes? My impression is that it is rigid like an html table, and we have mostly abandoned these for good reasons. With flexbox I can make the sidebar float below the content at a certain screen size. Can I do this with grid? So if anything, it seems to me that the global layout should be done with flexbox, and the grid is for smaller, more rigid elements that do not need to re-order on different screen sizes.
  - WorldMaker 10y ago
    Most of the same tricks to flexbox reordering and reflowing for responsive layouts apply to CSS grid as well. You can use @media queries to switch grid layouts based on things like screen size. With more recent specs you get a further advantage in that where flexbox reordering is based on easy to mix up numbering (at this media layout this Div A is 1, Div B is 2, Div C is 3, but in this other layout Div A is 3, Div B is 1 and Div C is 2) for naming your grid sections (Div A is "sidebar" and Div B is "main-content" and Div C is "footer"); the names stay consistent and only your designation of which name goes where in the grid flow (which is managed at the parent container level) shifts with media query reflows.
    - WorldMaker 10y ago
      For what it is worth, I built a complicated 2D, responsive layout for my blog (mostly to amuse myself). I allowed myself whatever tech choices I felt comfortable using and I wish I could have used Grid but browser support wasn't where I would have liked and neither was prollyfill support. The Flexbox version I built is a lot less simple to follow in the CSS media query switching than the Grid equivalent would have been (but Flexbox version has been quite reliable across browsers). Though the biggest loss in not having Grid support turned out to be what I wanted to do for DL (DD, DT) layout, since I tend to use those quite heavily, and neither Flexbox nor CSS Table Layout suffice (due to DT+DD[+DD...] sets lacking a wrapper element, per HTML spec).
    - konschubert 10y ago
      I just feel like using media queries isn't really responsive. It's like trying to make a list of all possible screen formats and trying to define a layout for each. In my opinion media queries are an antipattern because they create code bloat and need frequent maintainance.
rafibomb 10y ago
Flexbox excels for UI and CSS grid will work nice for layouts and some UI structure too. Together they are a powerhouse: this article explains it well https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-...
konschubert 10y ago
Maybe I am missing something, but the CSS Grid appears very rigid to me. It seems unsuitable for writing responsive pages where containers float below each other if there is not enough horizontal space. I would love to stand corrected, but my impression is that for responsive page designs, you will need flexbox, not the grid.
- WorldMaker 10y ago
  Just like Flexbox you can have different Grid layouts for different @media query breakpoints.
  - konschubert 10y ago
    Yes, but in my opinion, using media queries should be avoided. Media queries try to guess the screen size from the resolution, which is a bad hack in my eyes. And they imply assumptions about which screen sizes and pixels densities exist, something I'm trying to avoid when building truly responsive websites.
    - WorldMaker 10y ago
      Media queries have been based on "effective pixels" rather than actual screen size since early in iOS/WebKit development and entrenched (or worsened depending on your perspective, I suppose) in the "retina" shift and other browsers following suit. It's a communal hack, but you can mostly assume that a modern browser is going to choose applicable media queries based on what it best thinks its pixel density and device form factor may be, rather than actual specific screen size. (Including things like Windows' Tablet Mode switch signalling to Edge to apply media queries differently.) It might have been nice if CSS had more standard media queries that stated more explicitly what is desired (@media tablet-screen {} or something similar), but the compromise that remains is a solid one that mostly works and is adaptable/evolvable to potential future shifts in device profiles (both in browsers choosing different "effective pixel" ratings over time on the one side and CSS writers shifting breakpoints on the other). Yes, new CSS standards like Grid/Flexbox could try to invent new wheels to deal with responsive issues, but it's easier for those standards to get adopted if they just subsume existing standards such as media queries. I'm curious how you manage to avoid media queries while building "truly responsive" websites.

ahoy 10y ago

The general thinking is * use CSS Grid for layout in 2 dimensions. Page level layout essentially * use Flexbox for layout in 1 dimension. "module" level layout. These are not hard and fast rules, like much in CSS.

gsnedders 10y ago
Essentially, with what I've done with Grid, my opinion is Flexbox makes the 1D case simpler than the equivalent thing with Grid. AFAICT, this is the prevailing view the reason for the above.
konschubert 10y ago
I am really confused with CSS grid. How does it adjust to smaller screen sizes? My impression is that it is rigid like an html table, and we have mostly abandoned these for good reasons. With flexbox I can make the sidebar float below the content at a certain screen size. Can I do this with grid? So if anything, it seems to me that the global layout should be done with flexbox, and the grid is for smaller, more rigid elements that do not need to re-order on different screen sizes.
- WorldMaker 10y ago
  Most of the same tricks to flexbox reordering and reflowing for responsive layouts apply to CSS grid as well. You can use @media queries to switch grid layouts based on things like screen size. With more recent specs you get a further advantage in that where flexbox reordering is based on easy to mix up numbering (at this media layout this Div A is 1, Div B is 2, Div C is 3, but in this other layout Div A is 3, Div B is 1 and Div C is 2) for naming your grid sections (Div A is "sidebar" and Div B is "main-content" and Div C is "footer"); the names stay consistent and only your designation of which name goes where in the grid flow (which is managed at the parent container level) shifts with media query reflows.
  - WorldMaker 10y ago
    For what it is worth, I built a complicated 2D, responsive layout for my blog (mostly to amuse myself). I allowed myself whatever tech choices I felt comfortable using and I wish I could have used Grid but browser support wasn't where I would have liked and neither was prollyfill support. The Flexbox version I built is a lot less simple to follow in the CSS media query switching than the Grid equivalent would have been (but Flexbox version has been quite reliable across browsers). Though the biggest loss in not having Grid support turned out to be what I wanted to do for DL (DD, DT) layout, since I tend to use those quite heavily, and neither Flexbox nor CSS Table Layout suffice (due to DT+DD[+DD...] sets lacking a wrapper element, per HTML spec).
  - konschubert 10y ago
    I just feel like using media queries isn't really responsive. It's like trying to make a list of all possible screen formats and trying to define a layout for each. In my opinion media queries are an antipattern because they create code bloat and need frequent maintainance.

rafibomb 10y ago

Flexbox excels for UI and CSS grid will work nice for layouts and some UI structure too. Together they are a powerhouse: this article explains it well https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-...

konschubert 10y ago

Maybe I am missing something, but the CSS Grid appears very rigid to me. It seems unsuitable for writing responsive pages where containers float below each other if there is not enough horizontal space. I would love to stand corrected, but my impression is that for responsive page designs, you will need flexbox, not the grid.

WorldMaker 10y ago
Just like Flexbox you can have different Grid layouts for different @media query breakpoints.
- konschubert 10y ago
  Yes, but in my opinion, using media queries should be avoided. Media queries try to guess the screen size from the resolution, which is a bad hack in my eyes. And they imply assumptions about which screen sizes and pixels densities exist, something I'm trying to avoid when building truly responsive websites.
  - WorldMaker 10y ago
    Media queries have been based on "effective pixels" rather than actual screen size since early in iOS/WebKit development and entrenched (or worsened depending on your perspective, I suppose) in the "retina" shift and other browsers following suit. It's a communal hack, but you can mostly assume that a modern browser is going to choose applicable media queries based on what it best thinks its pixel density and device form factor may be, rather than actual specific screen size. (Including things like Windows' Tablet Mode switch signalling to Edge to apply media queries differently.) It might have been nice if CSS had more standard media queries that stated more explicitly what is desired (@media tablet-screen {} or something similar), but the compromise that remains is a solid one that mostly works and is adaptable/evolvable to potential future shifts in device profiles (both in browsers choosing different "effective pixel" ratings over time on the one side and CSS writers shifting breakpoints on the other). Yes, new CSS standards like Grid/Flexbox could try to invent new wheels to deal with responsive issues, but it's easier for those standards to get adopted if they just subsume existing standards such as media queries. I'm curious how you manage to avoid media queries while building "truly responsive" websites.