undefined | Better HN

0 pointskonschubert9y ago0 comments

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.

0 comments

3 comments · 1 top-level

WorldMaker9y ago· 2 in thread

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.

WorldMaker9y 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).

konschubertOP9y 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.

j / k navigate · click thread line to collapse