Ask HN: What should I know before I invest fully in CSS grid?

https://news.ycombinator.com/item?id=15880697

by mavsman • 9 years ago

76 17 9 years ago

news.ycombinator.com

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?

colept• 9 years ago

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.

fny• 9 years ago

Flexbox is actually complementary to CSS grids: you use it to controller vertical/horizontal spacing within a cell.

starik36• 9 years ago

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.

ksenzee2• 9 years ago

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.

swsieber• 9 years ago

I would love to see it (I think it will be more instructional than anything)

ksenzee2• 9 years ago

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.

jordanlev• 9 years ago

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 :)

oatmealsnap• 9 years ago

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.

kreetx• 9 years ago

Could you elaborate on how you achieve this?

iamnotlarry• 9 years ago

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.

bushin• 9 years ago

Don't waste three hours trying to create masonry layout.

johnsonjo2• 9 years ago

Here’s a masonry like layout with grid from Rachel Andrew https://gridbyexample.com/video/series-auto-placement-span/.

hirsin• 9 years ago

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.

johnsonjo2• 9 years ago

I second that, she also has a great site full of examples and video tutorials with grid https://gridbyexample.com.

didgeoridoo• 9 years ago

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.

robgibbons• 9 years ago

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.

tmaly• 9 years ago

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.

Ask HN: What should I know before I invest fully in CSS grid?

Related Stories