Ask HN: What should I know before I invest fully in CSS grid?
I've been keeping my eye on CSS grid, paying attention to its benefits and advantages. From what I see, it will only make my life a lot easier. What should I know before I dive in and adjust my existing layouts to use CSS grid?
22 comments
If you have an existing site, then you have a really great advantage (versus building something new): existing site traffic and analytics!
Look at which browsers your users are actually using, and check https://caniuse.com for which versions of which browsers support the new feature. Make a business decision on what percentage of visitors you're okay with getting a page without a nice layout.
If the number of visitors with non-supporting browsers is tiny, then go for it! But make sure at the very least your pages fall back to something where the content is visible and accessible... like make sure it is at least somewhat usable as a single-column list of things.
If the number of visitors with non-supporting browsers is higher than you're willing to lose out on, then still use CSS grid but spend more time on a fallback that looks okay (but doesn't have to be perfect). Perhaps this could be using flexbox (if your users are mostly on kind-of-new-but-not-super-old browsers), otherwise go old-school and use either floats or display:table. (I personally would go with display:table since it's the most grid-like... but depending on your layout it might fall apart under certain circumstances).
Key things to keep in mind are:
1) There are still plenty of people using browsers that don't support CSS Grid. But this may or may not be plenty of YOUR users, so check your actual traffic.
2) You definitely want a fallback of some kind, but the fallback does NOT need to be exactly perfect! "Good enough" is probably good enough.
And hopefully in 3 or 4 years we can forget about a time when CSS didn't actually have any tools intended for page layout :)
Look at which browsers your users are actually using, and check https://caniuse.com for which versions of which browsers support the new feature. Make a business decision on what percentage of visitors you're okay with getting a page without a nice layout.
If the number of visitors with non-supporting browsers is tiny, then go for it! But make sure at the very least your pages fall back to something where the content is visible and accessible... like make sure it is at least somewhat usable as a single-column list of things.
If the number of visitors with non-supporting browsers is higher than you're willing to lose out on, then still use CSS grid but spend more time on a fallback that looks okay (but doesn't have to be perfect). Perhaps this could be using flexbox (if your users are mostly on kind-of-new-but-not-super-old browsers), otherwise go old-school and use either floats or display:table. (I personally would go with display:table since it's the most grid-like... but depending on your layout it might fall apart under certain circumstances).
Key things to keep in mind are:
1) There are still plenty of people using browsers that don't support CSS Grid. But this may or may not be plenty of YOUR users, so check your actual traffic.
2) You definitely want a fallback of some kind, but the fallback does NOT need to be exactly perfect! "Good enough" is probably good enough.
And hopefully in 3 or 4 years we can forget about a time when CSS didn't actually have any tools intended for page layout :)
IE is the big hurdle. It can be done - Sascha Fuchs wrote some SASS mixins that take the place of IE's missing grid-gap, and I wrote a mixin recently to take the place of grid-autoflow. I'll publish it somewhere if anyone would find it useful.
I would love to see it (I think it will be more instructional than anything)
https://gist.github.com/ksenzee/276d60f3e251b1dfafaf52ed8dbd..., which is based on mixins at https://medium.com/@gisugosu/css-grid-layout-spec-2-to-spec-.... The @gisugosu article lets you use named areas, which my gist doesn't support; my gist lets you use autoflow, which the mixins in the article don't support. If you're using both methods, you'll need a combination of the two.
If you have to support IE - their implementation is different from the rest. And by different, I mean they are compliant with an earlier spec of CSS Grid. It is very likely not to work.
The evergreen browsers (chrome, ff, edge, safari, etc...) were well supported.
The evergreen browsers (chrome, ff, edge, safari, etc...) were well supported.
To help keep up to date, follow Rachel Andrew on Twitter (@rachelandrew). She's behind the spec and usually posts lots of handy updates and tutorials. Her feed should provide some good resources.
I second that, she also has a great site full of examples and video tutorials with grid https://gridbyexample.com.
I have found it is really easy to create good fallbacks. If your content still makes sense when stacked vertically, you're good to go. (and it should make sense in this format, as screen-readers don't follow your grid)
This of it this way: If your mobile view is also your <IE11 view, you shouldn't have to do much overriding.
This of it this way: If your mobile view is also your <IE11 view, you shouldn't have to do much overriding.
Could you elaborate on how you achieve this?
Support between browsers can be iffy. I had a grid implementation on cole.codes and it looked perfect on Chrome but disappeared entirely from Firefox. It wasn't supported at all in Safari at the time.
You will need fallbacks. Flexbox isn't going anywhere.
You will need fallbacks. Flexbox isn't going anywhere.
Flexbox is actually complementary to CSS grids: you use it to controller vertical/horizontal spacing within a cell.
I personally found that, without subgrid support yet, you really can't do many of the things that you'd logically want to use a grid for (e.g. aligning sub-elements of a modules with those of the same module in a row or column). I'd try doing a quick prototype to ensure that grid even is an improvement over flexbox for your specific use case.
My biggest concern would be browser support. However, with many browsers on desktop and phone getting regular updates, this might be less of an issue than it use to be.
If you need to support IE11 or older, it's probably a no-go. IE will claim that it's supported, but uses an older, obsolete and frankly useless implementation of the grid system.
Don't waste three hours trying to create masonry layout.
Here’s a masonry like layout with grid from Rachel Andrew https://gridbyexample.com/video/series-auto-placement-span/.
grid fights with other css. For instance, shading every other row of a grid has to be done on each cell, not on a row, and becomes problematic if you set css order, or if you fill a row with fewer columns, etc.
jmccargo(1)