
Ask HN: What should I know before I invest fully in CSS grid? - mavsman
I&#x27;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?
======
jordanlev
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](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 :)

------
ksenzee
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
I would love to see it (I think it will be more instructional than anything)

~~~
ksenzee
[https://gist.github.com/ksenzee/276d60f3e251b1dfafaf52ed8dbd...](https://gist.github.com/ksenzee/276d60f3e251b1dfafaf52ed8dbdb0de),
which is based on mixins at [https://medium.com/@gisugosu/css-grid-layout-
spec-2-to-spec-...](https://medium.com/@gisugosu/css-grid-layout-spec-2-to-
spec-1-transpiler-with-sass-415dff4dd31b). 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.

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

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

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

------
oatmealsnap
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
Could you elaborate on how you achieve this?

------
colept
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
Flexbox is actually complementary to CSS grids: you use it to controller
vertical/horizontal spacing within a cell.

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

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

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

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

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

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

