kartoffelmos 8 months 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

  • a_humean 8 months 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 8 months 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 8 months 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 8 months ago

        Don't underestimate the power of business customers using outdated software. (I have to support IE10 everytime and IE9 if possible)

    • kaushalmodi 8 months 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 8 months ago

        IE11 does not autoupdate.

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

        • guhidalg 8 months ago

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

          • dak1 8 months 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 8 months 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 8 months ago

            What are IE developers?

            • a_humean 8 months ago

              Web Developers that do enterprise software.

      • andrei_says_ 8 months 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 8 months ago

        Edge supports all CSS Grid properties.

    • sbegaudeau 8 months 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 8 months 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 8 months 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 8 months ago

          Personally I find the idea of a bank supporting such an outdated browser disturbing on a security level.

          • itsmendy 8 months ago


            • dspillett 7 months 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 8 months 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 8 months ago

    Which actually translates to like 99% of real user browsers.

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

irrational 8 months 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 8 months 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 8 months 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 8 months 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.

kjullien 8 months ago

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

smaker1 8 months ago

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

fullofsid 8 months ago

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

  • lourot 8 months 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 8 months ago

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

MrEfficiency 8 months 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 8 months 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 8 months 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 8 months 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 8 months ago

        Who said that?

        • jandrese 8 months 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 8 months ago

            The grandparent post said nothing about memorizing.

    • Moru 8 months ago

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

  • bovermyer 8 months ago

    What does this have to do with the post?