
Visual Cheatsheet for CSS Grid Layout - lourot
http://grid.malven.co/
======
kartoffelmos
> CSS Grid Layout is currently supported by very few browsers and this page
> may not display as intended for you.

As of right now, CSS grids is supported by 83%-86% of browsers.

Source: [https://caniuse.com/#feat=css-grid](https://caniuse.com/#feat=css-
grid)

~~~
a_humean
You are right, but critically it isn't supported by IE 11 which is probably
what the author cares about. There is probably a majority of projects,
including mine, that will have to wait for IE11 usage, especially in the
corporate/enterprise sector, to sharply decline before using grid.

Microsoft intends to support IE11 until 2025.

~~~
kaushalmodi
> You are right, but critically it isn't supported by IE 11

This has always bugged me. Why does IE always lag behind in such CSS features?
What kind of politics is this? Or is it that Microsoft does not have a big or
smart enough browser team that can bring the IE/Edge features at par with
Firefox/Chrome?

I've been so pissed off by this that I've started a micro-revolution by not
caring if my blog renders well on IE/Edge. IE is pain in meeting compatibility
with the CSP headers too. Hopefully more people start doing this so that
people are forced to move to a better browser than IE.

~~~
koboll
IE11 does not autoupdate.

Thus it is stuck, frozen in time, a deadweight clinging onto front-end web
development.

~~~
guhidalg
Or, viewed another way, IE developers have a stable API surface to work on
that isn't a moving target every hour.

~~~
talmand
What are IE developers?

~~~
a_humean
Web Developers that do enterprise software.

------
malven
I'm the original author. This was created a few years ago, at a time when very
few browsers fully-supported grid, and although I still use this frequently as
a reference, I never took the time to update the disclaimer at the top of the
page. If I'd thought there was any chance this would pop up on HN I probably
would've updated it awhile ago.

At this point, Grid Layout is well-supported in enough modern/evergreen
browsers that I don't feel this disclaimer is still necessary. As others have
posted IE 11 is really the only reason not to aggressively use grid for many
projects. I'll be removing this warning shortly.

~~~
malven
While I'm here, I also created a similar visual cheatsheet for Flexbox that I
still find very useful: [http://flexbox.malven.co](http://flexbox.malven.co)

------
irrational
"CSS Grid Layout is currently supported by very few browsers and this page may
not display as intended for you."

According to caniuse, CSS Grid is supported by all browsers except IE and
Opera Mini.

~~~
superkuh
What this kind of statement fails to acknowledge is that not everyone uses the
absolute latest version of their browser. And CSS grid _is_ recent. It doesn't
take too old of a version to lack support entirely.

~~~
Phrodo_00
Most browsers on windows and mac (and linux if installed without a package
manager or you're using a non-stable distro) autoupdate, so most people are
within 3 version of the latest, and caniuse takes browser versions into
account.

------
pasta
Interesting: #kartoffelmos posted here that 83%-86% of the browsers support
this while #irrational posted that it is supported by all browsers except IE
en Opera Mini.

I never saw this but you can switch between "Current aligned", "Usage
relative" and "Date relative" @ caniuse.com

The default is "Current aligned" but it might not be the best default because
it doesn't show what you will target.

------
projproj
I created a related tool for testing different combinations of CSS grid rules.
[http://grids.help/](http://grids.help/)

------
kjullien
Anyone knows if a similar cheat sheet is available with a light theme for
people like me with terrible eyesight ?

------
smaker1
Just want to say, that's brilliantly simple use of css-grid. Nicely done.
Thanks for the cheer sheet :)

------
fullofsid
This is a very old un-updated project and probably a repost

~~~
lourot
actually I checked before posting and it seemed that no one had ever posted
this on HN or reddit.

It might be old but it's not outdated. I have discovered it a few days ago
because I'm doing something with CSS grids at the moment and I'm checking this
page everyday.

EDIT: ok the warning at the top "CSS Grid Layout is currently supported by
very few browsers" is outdated but the actual cheatsheet is definitely not :)

~~~
fullofsid
There's a difference between outdated and un-updated.

------
MrEfficiency
CSS is one of those things I think you bite the bullet and learn over a
weekend.

Its frustrating rather than difficult + the instant gratification makes it a
fun little weekend project.

EDIT: For clarity-

"Cheat sheets" in CSS IMO are more harm than good. Sure, google the occasional
'align'. But until you start typing in your own code, you really are hacking
your CSS.

Taking a weekend to learn CSS is learning the syntax and applying it. After
this, you will know what to google, what type of responsive problems you will
be setting widths for, etc...

Its very easy to use other people's work in HTML/CSS without ever
understanding it.

~~~
oliyoung
I've been writing CSS since the late 90's. I look up CSS syntax almost daily.

This comment is seriously unhelpful gatekeeping

~~~
jandrese
There's an air of "I am very smart" about the guy who claims to have memorized
the entirety of CSS in a weekend.

~~~
MrEfficiency
Who said that?

~~~
jandrese
The grandparent post. After a weekend of CSS you don't even know what you
don't know. The complexity isn't the syntax, its the interactions between all
of the elements.

~~~
MrEfficiency
The grandparent post said nothing about memorizing.

