Visual Cheatsheet for CSS Grid Layout | Hacker News Reader

Visual Cheatsheet for CSS Grid Layout

grid.malven.co

178 pointslourot44 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

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.

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.

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

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

Why?

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.

BUT:

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

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%

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

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.

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.

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

Edge supports all CSS Grid properties.

IE11 does not autoupdate.

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

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

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.

What are IE developers?

Web Developers that do enterprise software.

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.

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.

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.

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

https://css-tricks.com/css-grid-in-ie-debunking-common-ie-gr...

IE10/11?

Would love to see links for this.

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.

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

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

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.

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.

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.

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

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

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

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

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

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.

What does this have to do with the post?

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.

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

This comment is seriously unhelpful gatekeeping

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

Who said that?

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.

The grandparent post said nothing about memorizing.

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

Reply on news.ycombinator.com