As of right now, CSS grids is supported by 83%-86% of browsers.
Would love to see links for this.
Microsoft intends to support IE11 until 2025.
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.
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.
Thus it is stuck, frozen in time, a deadweight clinging onto front-end web development.
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.
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.
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!).
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).
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.
According to caniuse, CSS Grid is supported by all browsers except IE and 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.
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 :)
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.
This comment is seriously unhelpful gatekeeping