Re:Flexible data tables with CSS Grid
by chrismorgan on Sunday May 19, 2019 @12:08PM
(#19953978)
> The thing is once you "get" Grid you will never go back to any other layout.
In theory, I agree. Grid is nice for layouts. But in practice, you often can’t actually make that decision, due to browser support requirements. (And I’m not talking about IE11—it’s typically a little painful, but you can get your -ms-grid-* properties equivalent to your grid-* properties with some autoprefixer and a little extra work, when it’s page layout rather than auto content layout that you’re using the grid for.) To use it as an enhancement if present, yes, but it’s often not acceptable to require it. Thus, you need your Flexbox fallback anyway, and if there’s no functional difference between the two, well, why would you put the Grid implementation in? (If you look at the Topicbox hero area example I mentioned earlier you’ll see it handles the absence of Grid support nicely, falling back to the single-dimensional Flexbox layout used on smaller screens. If the Grid layout is different from the fallback Flexbox layout, my remarks do not apply, and using both is reasonable.)
I also observe that two-dimensional layouts are actually not common these days, and almost all of the ones that there are are trivially reducible to nested one-dimensional layouts.
> Flexbox is heavily dependent on how you place your markup which sucks from an accessibility point of view. With Grid, the layout declaration is completely dissociated with markup order (which is very important because you don't want to be juggling with both at once while setting your layout).
When you treat Grid like this, you’re neglecting an important part of accessibility: the DOM order is still very important, because it’s what accessibility tools use, and what things like Tab navigation works on. This is why using `order` to reorder things in Flexbox is normally a bad thing to do, and why you need to be cautious with any sort of reordering with Grid.
So in a way, I argue that Flexbox’s limitations actually tend to help you maintain sanity and accessibility, not break it. It’s not always the case, and it does mean that you often end up with a little presentational markup, but in practice that’s basically unavoidable for anything serious anyway. (I say that as one who spends way too long on keeping his markup unblemished.)
In theory, I agree. Grid is nice for layouts. But in practice, you often can’t actually make that decision, due to browser support requirements. (And I’m not talking about IE11—it’s typically a little painful, but you can get your -ms-grid-* properties equivalent to your grid-* properties with some autoprefixer and a little extra work, when it’s page layout rather than auto content layout that you’re using the grid for.) To use it as an enhancement if present, yes, but it’s often not acceptable to require it. Thus, you need your Flexbox fallback anyway, and if there’s no functional difference between the two, well, why would you put the Grid implementation in? (If you look at the Topicbox hero area example I mentioned earlier you’ll see it handles the absence of Grid support nicely, falling back to the single-dimensional Flexbox layout used on smaller screens. If the Grid layout is different from the fallback Flexbox layout, my remarks do not apply, and using both is reasonable.)
I also observe that two-dimensional layouts are actually not common these days, and almost all of the ones that there are are trivially reducible to nested one-dimensional layouts.
> Flexbox is heavily dependent on how you place your markup which sucks from an accessibility point of view. With Grid, the layout declaration is completely dissociated with markup order (which is very important because you don't want to be juggling with both at once while setting your layout).
When you treat Grid like this, you’re neglecting an important part of accessibility: the DOM order is still very important, because it’s what accessibility tools use, and what things like Tab navigation works on. This is why using `order` to reorder things in Flexbox is normally a bad thing to do, and why you need to be cautious with any sort of reordering with Grid.
So in a way, I argue that Flexbox’s limitations actually tend to help you maintain sanity and accessibility, not break it. It’s not always the case, and it does mean that you often end up with a little presentational markup, but in practice that’s basically unavoidable for anything serious anyway. (I say that as one who spends way too long on keeping his markup unblemished.)