kartoffelmos 373 days 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

kumarharsh 373 days ago [-]
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.
geoah 373 days ago [-]
Do you happen to have any links/examples of this?
andrei_says_ 372 days ago [-]

Would love to see links for this.

a_humean 373 days 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.

TomK32 373 days 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%
dspillett 373 days ago [-]
That is overall audience though, for more specific sets of people the IE11 proportion is much higher.

For a game, a technical development site, a home improvement tutorial site, a blog about My Little Pony, other things that are targeting only (or at least primarily) home and/or technical users you are probably able to completely ignore IE11, but if your project cares to be used in certain commercial or government/public sectors (investment banking in my case, health care and education too I'm told, ...) IE11 support is unfortunately still absolutely essential.

zaarn 373 days ago [-]
Don't underestimate the power of business customers using outdated software. (I have to support IE10 everytime and IE9 if possible)
kaushalmodi 373 days 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.

koboll 373 days ago [-]
IE11 does not autoupdate.

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

guhidalg 373 days ago [-]
Or, viewed another way, IE developers have a stable API surface to work on that isn't a moving target every hour.
dak1 373 days ago [-]
Evergreen browsers provide a stable API surface as well, because the APIs are backwards compatible. Adding support for CSS Grid does not break Flexbox or anything else I was already using. It simply gives me another tool.
ahoy 373 days ago [-]
There's no moving target. You can write your layout with tables like it's 2005 and it'll render just fine in the latest version of firefox/chrome/safari/edge.
talmand 373 days ago [-]
What are IE developers?
a_humean 373 days ago [-]
Web Developers that do enterprise software.
andrei_says_ 372 days ago [-]
People who work in financial/healthcare/government institutions have locked workstations and cannot install anything so they cannot move to another OS or browser until the org decides to do so, which is a complex, expensive and maybe even impossible endeavor.

For a blog this wouldn’t be a big issue but if it’s a company website and your biggest clients see a broken layout, it’s a problem.

kumarharsh 373 days ago [-]
Edge supports all CSS Grid properties.
sbegaudeau 373 days 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.
pjmlp 373 days 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.

dspillett 373 days ago [-]
> Recently I just heard of a company that finally, in 2018, upgraded their IE requirements to IE 11.

One of our clients is one of the largest investment/savings banks in the UK. For services for their back-office and branch users they have only just dropped IE8 support as a requirement.

Logs I have access to show a fair number of users still have IE8 and are using it to access our legacy products, though we are assured that everyone either has IE11 or Chrome or both so for the newer services releasing to them RealSoonNow(tm) our insistence on dropping support for IE prior to 11 is not going to be a problem (though we have heard that before, so I on this matter I await the post rollout feedback with a mix of hope and trepidation!).

talmand 373 days ago [-]
Personally I find the idea of a bank supporting such an outdated browser disturbing on a security level.
itsmendy 372 days ago [-]
dspillett 370 days ago [-]
The feeling is often that using such old software implies being "backwards" so possible vulnerable to exploits in the older code. Of course while the browser is still officially supported (as IE11 is due to be for some time) security releases are still being made so it should in theory be as safe as a current browser.


1. Still using IE8 is absolutely a red flag, that stopped being supported in 2016.

2. Being so far behind with browsers may imply being behind generally, and while IE11 is still security patched maybe the organisation runs other old software that isn't (news flash: I can report that at least two organisations I know of routinely run software in their back-office environments that is not longer supported at all because the vendor closed, the product was never passed on to other maintainers or opened, and projects to replace the affected software are massively behind schedule - for obvious reasons I won't state who those organisations are and what the software is).

originalsimba 373 days ago [-]
the ignorant masses treat browser updating as if it's some kind of hassle rather than a necessary part of operating a computer along with a cool thing because it usually brings new features and better performance.

This is a problem of education, reinforced by the fact that the people making decisions in corporations are usually part of that same ignorant masses (CEOs and such), and rarely are they people with real expertise on the subject. Plus the people who run the I.T. departments who should be correcting their CEOs failures are too afraid of being fired so they do whatever they're told.

Ah humanity. It's such a simple problem to fix, and they make it so needlessly complicated.

originalsimba 373 days ago [-]
Which actually translates to like 99% of real user browsers.
malven 370 days 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.

malven 370 days ago [-]
While I'm here, I also created a similar visual cheatsheet for Flexbox that I still find very useful: http://flexbox.malven.co
irrational 373 days 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.

superkuh 373 days 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_00 372 days 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.
pasta 373 days 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.

projproj 373 days ago [-]
I created a related tool for testing different combinations of CSS grid rules. http://grids.help/
kjullien 372 days ago [-]
Anyone knows if a similar cheat sheet is available with a light theme for people like me with terrible eyesight ?
smaker1 372 days ago [-]
Just want to say, that's brilliantly simple use of css-grid. Nicely done. Thanks for the cheer sheet :)
fullofsid 373 days ago [-]
This is a very old un-updated project and probably a repost
lourot 373 days 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 :)

fullofsid 373 days ago [-]
There's a difference between outdated and un-updated.
MrEfficiency 373 days 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.

george4n 373 days 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.
oliyoung 373 days ago [-]
I've been writing CSS since the late 90's. I look up CSS syntax almost daily.

This comment is seriously unhelpful gatekeeping

jandrese 373 days 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.
MrEfficiency 372 days ago [-]
Who said that?
jandrese 372 days ago [-]
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 372 days ago [-]
The grandparent post said nothing about memorizing.
Moru 372 days ago [-]
Know enough to humbly know that I know far from everything or know just enough to be dangerous?
bovermyer 373 days ago [-]
What does this have to do with the post?