Visual Cheatsheet for CSS Grid Layout (opens in new tab)

(grid.malven.co)

178 pointslourot7y ago44 comments

44 comments

> 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

Speaking from experience, with autoprefixer and PostCSS, you can write nearly all your CSS-Grid in standards compliant CSS, and IE handles it all pretty well. The postcss team have done an awesome job on this.

geoah7y ago

Do you happen to have any links/examples of this?

1 more reply

andrei_says_7y ago

IE10/11?

Would love to see links for this.

a_humean7y ago

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.

TomK327y ago

https://caniuse.com/#search=grid If you look at the relative usage, IE11 with its 2.64% is closely followed by Opera Mini with 2.29%

2 more replies

kaushalmodi7y ago

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

3 more replies

sbegaudeau7y ago

On one of our project, we are using CSS Grid but for a part of our application we need to support IE11. For this use case, we have decided to use the Grid implementation of IE11 and while different on some points, it is still close enough to be maintainable next to some CSS Grid if you don't use some advanced concepts.

pjmlp7y ago

Recently I just heard of a company that finally, in 2018, upgraded their IE requirements to IE 11.

On the other hand, given that CSS grids were proposed by the XAML team, IE 11 does support the initial version of them, which is already better than not having them at all.

1 more reply

malven7y ago

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.

malven7y ago

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

irrational7y ago

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

superkuh7y ago

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_007y ago

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.

pasta7y ago

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.

projproj7y ago

I created a related tool for testing different combinations of CSS grid rules. http://grids.help/

smaker17y ago

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

fullofsid7y ago

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

lourotOP7y ago

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

fullofsid7y ago

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

MrEfficiency7y ago

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.

george4n7y ago

Not a very constructive comment but sure you can brush over the syntax in a weekend, it will take a lot more than a couple of days to master CSS.

oliyoung7y ago

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

This comment is seriously unhelpful gatekeeping

jandrese7y ago

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

1 more reply

Moru7y ago

Know enough to humbly know that I know far from everything or know just enough to be dangerous?

bovermyer7y ago

What does this have to do with the post?

j / k navigate · click thread line to collapse

44 comments

kartoffelmos7y ago

> 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

kumarharsh7y ago

geoah7y ago

Do you happen to have any links/examples of this?

1 more reply

andrei_says_7y ago

IE10/11?

Would love to see links for this.

a_humean7y ago

Microsoft intends to support IE11 until 2025.

TomK327y ago

https://caniuse.com/#search=grid If you look at the relative usage, IE11 with its 2.64% is closely followed by Opera Mini with 2.29%

2 more replies

kaushalmodi7y ago

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

3 more replies

sbegaudeau7y ago

pjmlp7y ago

Recently I just heard of a company that finally, in 2018, upgraded their IE requirements to IE 11.

On the other hand, given that CSS grids were proposed by the XAML team, IE 11 does support the initial version of them, which is already better than not having them at all.

1 more reply

malven7y ago

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

irrational7y ago

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

superkuh7y ago

Phrodo_007y ago

pasta7y ago

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.

projproj7y ago

I created a related tool for testing different combinations of CSS grid rules. http://grids.help/

smaker17y ago

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

fullofsid7y ago

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

lourotOP7y ago

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

fullofsid7y ago

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

MrEfficiency7y ago

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.

george4n7y ago

Not a very constructive comment but sure you can brush over the syntax in a weekend, it will take a lot more than a couple of days to master CSS.

oliyoung7y ago

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

This comment is seriously unhelpful gatekeeping

jandrese7y ago

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

1 more reply

Moru7y ago

Know enough to humbly know that I know far from everything or know just enough to be dangerous?

bovermyer7y ago

What does this have to do with the post?

j / k navigate · click thread line to collapse