Does CSS Grid Replace Flexbox?
css-tricks.com
Does CSS Grid Replace Flexbox?
1–10 of 32 posts
Re: Does CSS Grid Replace Flexbox?
#2tl;dr: no
CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.
Re: Does CSS Grid Replace Flexbox?
#3tl;dr: no CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.
You'd be forgiven for thinking, logically, that something which works in two dimensions would do everything that something which only works in one dimension would do. Unless the two, in fact, were intended for entirely different purposes, in which case the dimensions would be irrelevant.
I'm not sure the process which has resulted in both CSS Grid and Flexbox was really much grounded in logic (or common sense), though.
Re: Does CSS Grid Replace Flexbox?
#4tl;dr: no CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.
Betteridge's Law in full effect.
Re: Does CSS Grid Replace Flexbox?
#5In addition to the one-dimension vs two-dimension distinction, perhaps it useful to think of CSS Grid as for page/application-level layout, whereas Flexbox is for component-level layout.
Re: Does CSS Grid Replace Flexbox?
#6As a systems guy who only occasionally pokes his head into this web stuff: have we now completed the circle? For well over a decade I've seen generations of web hackers rail on about the evils of tables for layout. And now I look at this thing, and... it's a table. For layout.
Oh sure, it's a table defined externally to the components. So your screen-reader enumeration of the document structure is unpolluted by the physical layout which is stored in a separate data structure in a separate language. And that's... good, I guess?
Meanwhile I see that native app development continues, as it has for like 30 years now, to shamelessly put UI components directly into hierarchies based on physical layout. And they still haven't tripped over the paradigm.
I know it sounds glib, but it's a serious question: tell me again what was wrong with ?
Re: Does CSS Grid Replace Flexbox?
#7As a systems guy who only occasionally pokes his head into this web stuff: have we now completed the circle? For well over a decade I've seen generations of web hackers rail on about the evils of tables for layout. And now I look at this thing, and... it's a table. For layout. Oh sure, it's a table defined externally to the components. So your screen-reader enumeration of the document structure is unpolluted by the p…
Tables are for tabular data. The layout functionality is perfectly fine for layout, but the fact that you're semantically describing the page contents as tabular data goes against the original intent and meaning for the element.
Re: Does CSS Grid Replace Flexbox?
#8As a systems guy who only occasionally pokes his head into this web stuff: have we now completed the circle? For well over a decade I've seen generations of web hackers rail on about the evils of tables for layout. And now I look at this thing, and... it's a table. For layout. Oh sure, it's a table defined externally to the components. So your screen-reader enumeration of the document structure is unpolluted by the p…
Tables are for tabular data. The layout functionality is perfectly fine for layout, but the fact that you're semantically describing the page contents as tabular data goes against the original intent and meaning for the element.
So... and I swear I'm not being as glib as I sound: The only reason Grid is OK and Table isn't is adherence to the design intent of a 25 year old SGML hack?
Basically you're just restating the orthodoxy. I know the orthodoxy. I'm asking if maybe this is time to revisit it, and wondering if maybe the last 16 years of flamage were a mistake.
Re: Does CSS Grid Replace Flexbox?
#9Earlier quoted context omitted.
Tables are for tabular data. The layout functionality is perfectly fine for layout, but the fact that you're semantically describing the page contents as tabular data goes against the original intent and meaning for the element.
So... and I swear I'm not being as glib as I sound: The only reason Grid is OK and Table isn't is adherence to the design intent of a 25 year old SGML hack? Basically you're just restating the orthodoxy. I know the orthodoxy. I'm asking if maybe this is time to revisit it, and wondering if maybe the last 16 years of flamage were a mistake.
You're speaking as if table layouts are equivalent to CSS grid layouts. They're not, otherwise `display: table-cell` would have been enough.
Re: Does CSS Grid Replace Flexbox?
#10Earlier quoted context omitted.
So... and I swear I'm not being as glib as I sound: The only reason Grid is OK and Table isn't is adherence to the design intent of a 25 year old SGML hack? Basically you're just restating the orthodoxy. I know the orthodoxy. I'm asking if maybe this is time to revisit it, and wondering if maybe the last 16 years of flamage were a mistake.
You're speaking as if table layouts are equivalent to CSS grid layouts. They're not, otherwise `display: table-cell` would have been enough.
This is a very fair point. For instance, you can't do the sticky footer Flexbox example with a table layout: https://philipwalton.github.io/solved-by-flexbox/demos/stick... (or, at least, I can't immediately think how you'd do it, but hey, it's late, and it's been more than a decade since I've used tables to lay things out...)