8 ms·

Does CSS Grid Replace Flexbox?

59 points by mirceasoaica 10y ago

pitaj 10y ago
tl;dr: no CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.
- bshimmin 10y ago
  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.
- bussierem 10y ago
  Betteridge's Law in full effect.
- SippinLean 10y ago
  That doesn't summarize the article: >it's not impossible to make multi-dimensional layouts in just Flexbox Both are 2D layout mechanisms. You can make Grid act like Flexbox and vice-versa but they have different strengths, and are best used in tandem.
  - Lio 10y ago
    Rachel Andrew has added a very illuminating comments to the article which, I think, highlights why Flexbox can't do what Grid does:- “Potentially Confusing: a “2D” Layout with Flexbox” – that isn’t a 2d layout. It’s a wrapped flex layout. As soon as you want to make that final box line up with the boxes in the first column you realise what you have isn’t two-dimensional. Flex wrapping doesn’t make it two dimensional. Each row (in your example) is a flex container itself, space distribution happens across each row individually. Which is why it isn’t two-dimensional. More here https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-about-the-container/ https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-a... You can also space grid tracks out evenly and so on, box alignment is shared by both the flexbox and grid specifications. For examples of that see http://gridbyexample.com/video/align-grid/ http://gridbyexample.com/video/align-grid/
jimmcslim 10y ago
In 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.
ajross 10y ago
As 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 <table>?
- Zikes 10y ago
  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 <table> element.
  - ajross 10y ago
    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.
    - woogley 10y ago
      You're speaking as if table layouts are equivalent to CSS grid layouts. They're not, otherwise `display: table-cell` would have been enough.
      - bshimmin 10y ago
        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/sticky-footer/ 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...)
tracker1 10y ago
Honestly, I almost just want simple tables back... It really feels like we've been working very hard to create more complex layouts with flex/grid systems, and while I can see the need in some cases... I can't help but feel a lot of the more trivial things would be better with simple table.
- jordanlev 10y ago
  You can still use tables and CSS display:table (you should use the latter if the content is not actually tabular data so as not to make life annoying for people using screen readers). But for those of us building sites with complex layouts (and situations where we can't be entirely sure of the contents, e.g. using a CMS or static site generator), it's really amazing to finally have tools in CSS to actually do page layout.
  - tracker1 10y ago
    Oh, I very much agree... but I recently took the time to come up with a nice layout using flexbox (really my first time delving in without relying on a framework for most of it), and it wasn't too bad, some of the naming conventions are weird. But then I pull it up in IE11 in a VM and Safari... man, those were painful to fix. Yeah, I was maybe missing things, or the defaults aren't as sane as they could have been.. but Chrome and FF looked/worked great, but Safari in particular I had to redo things... then back and forth until it finally worked across the board.
nkristoffersen 10y ago
I still use: .mytable{display:table} .myrow{display:table-row} .mycell{display:table-cell;vertical-align:middle;} Simply because it's been the fastest and easiest way for me to vertically align stuff. Plus very backwards compatible. But I think I'm in the minority by not using the flexbox, etc.
- jordanlev 10y ago
  If that works for you and your designs, then great! But there are a lot of places where display:table falls apart, especially with responsive designs. Flexbox and Grid also bring a new level of ability to separate source order from display order, which isn't possible using display:table.
frik 10y ago
Looking at the CSS Grid examples, I am not sure why? Tables and Divs with reflow can do the same, but with more predictable outcome and less boilerplate. How about optimising the existing render-paths even more in Blink/Webkit/Gecko instead requiring us to wrap the head around new-but-old things to make it easier for you (the engine devs). Or who else thought it's a good idea to invent yet another syntax. There was a lot of unfounded hate against Tables for the last 15 years, but as we all learned out, Tables have there place.
- ry_ry 10y ago
  Tables absolutely have their place... for rendering tabular data! The idea that tables are "bad" was always semantic FUD, but i like to think we're pretty much over that these days and the fact remains that they're far from ideal for responsive page-level layout and we now have a far more powerful (and meaningful!) toolbox to pick from. The CSS display-table techniques were at best a hack, disguising the presence tables in the markup, but they were still there at an abstract level in all their tabley glory. The stuff you can do with a handful of lines of flexbox/grid blow a conventional table layout away at the expense of a steeper learning curve. They're honestly worth the effort.
ry_ry 10y ago
Ignoring that they're for quite different tasks - Flexbox's (albeit crappy) support in IE11 makes it more appealing if I was going to pick one of the two. IE11 still has more users[0] hitting our main site than Edge, so I can see legacy support dragging on for a while yet. But as pretty much everybody has noted, they do different things so this is more of a hypothetical comparison. [0] Just checked - Edge 2.9%, IE11 4.2% of ~1.6m visits so far this month.

59 points by mirceasoaica 10y ago

pitaj 10y ago

tl;dr: no CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.

bshimmin 10y ago
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.
bussierem 10y ago
Betteridge's Law in full effect.
SippinLean 10y ago
That doesn't summarize the article: >it's not impossible to make multi-dimensional layouts in just Flexbox Both are 2D layout mechanisms. You can make Grid act like Flexbox and vice-versa but they have different strengths, and are best used in tandem.
- Lio 10y ago
  Rachel Andrew has added a very illuminating comments to the article which, I think, highlights why Flexbox can't do what Grid does:- “Potentially Confusing: a “2D” Layout with Flexbox” – that isn’t a 2d layout. It’s a wrapped flex layout. As soon as you want to make that final box line up with the boxes in the first column you realise what you have isn’t two-dimensional. Flex wrapping doesn’t make it two dimensional. Each row (in your example) is a flex container itself, space distribution happens across each row individually. Which is why it isn’t two-dimensional. More here https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-about-the-container/ https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-a... You can also space grid tracks out evenly and so on, box alignment is shared by both the flexbox and grid specifications. For examples of that see http://gridbyexample.com/video/align-grid/ http://gridbyexample.com/video/align-grid/

jimmcslim 10y ago

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

ajross 10y ago

As 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 <table>?

Zikes 10y ago
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 <table> element.
- ajross 10y ago
  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.
  - woogley 10y ago
    You're speaking as if table layouts are equivalent to CSS grid layouts. They're not, otherwise `display: table-cell` would have been enough.
    - bshimmin 10y ago
      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/sticky-footer/ 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...)

tracker1 10y ago

Honestly, I almost just want simple tables back... It really feels like we've been working very hard to create more complex layouts with flex/grid systems, and while I can see the need in some cases... I can't help but feel a lot of the more trivial things would be better with simple table.

jordanlev 10y ago
You can still use tables and CSS display:table (you should use the latter if the content is not actually tabular data so as not to make life annoying for people using screen readers). But for those of us building sites with complex layouts (and situations where we can't be entirely sure of the contents, e.g. using a CMS or static site generator), it's really amazing to finally have tools in CSS to actually do page layout.
- tracker1 10y ago
  Oh, I very much agree... but I recently took the time to come up with a nice layout using flexbox (really my first time delving in without relying on a framework for most of it), and it wasn't too bad, some of the naming conventions are weird. But then I pull it up in IE11 in a VM and Safari... man, those were painful to fix. Yeah, I was maybe missing things, or the defaults aren't as sane as they could have been.. but Chrome and FF looked/worked great, but Safari in particular I had to redo things... then back and forth until it finally worked across the board.

nkristoffersen 10y ago

I still use: .mytable{display:table} .myrow{display:table-row} .mycell{display:table-cell;vertical-align:middle;} Simply because it's been the fastest and easiest way for me to vertically align stuff. Plus very backwards compatible. But I think I'm in the minority by not using the flexbox, etc.

jordanlev 10y ago
If that works for you and your designs, then great! But there are a lot of places where display:table falls apart, especially with responsive designs. Flexbox and Grid also bring a new level of ability to separate source order from display order, which isn't possible using display:table.

frik 10y ago

Looking at the CSS Grid examples, I am not sure why? Tables and Divs with reflow can do the same, but with more predictable outcome and less boilerplate. How about optimising the existing render-paths even more in Blink/Webkit/Gecko instead requiring us to wrap the head around new-but-old things to make it easier for you (the engine devs). Or who else thought it's a good idea to invent yet another syntax. There was a lot of unfounded hate against Tables for the last 15 years, but as we all learned out, Tables have there place.

ry_ry 10y ago
Tables absolutely have their place... for rendering tabular data! The idea that tables are "bad" was always semantic FUD, but i like to think we're pretty much over that these days and the fact remains that they're far from ideal for responsive page-level layout and we now have a far more powerful (and meaningful!) toolbox to pick from. The CSS display-table techniques were at best a hack, disguising the presence tables in the markup, but they were still there at an abstract level in all their tabley glory. The stuff you can do with a handful of lines of flexbox/grid blow a conventional table layout away at the expense of a steeper learning curve. They're honestly worth the effort.

ry_ry 10y ago

Ignoring that they're for quite different tasks - Flexbox's (albeit crappy) support in IE11 makes it more appealing if I was going to pick one of the two. IE11 still has more users[0] hitting our main site than Edge, so I can see legacy support dragging on for a while yet. But as pretty much everybody has noted, they do different things so this is more of a hypothetical comparison. [0] Just checked - Edge 2.9%, IE11 4.2% of ~1.6m visits so far this month.