6 ms·

Visual Cheatsheet for CSS Grid Layout

178 points by lourot 8y ago

kartoffelmos 8y 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 https://caniuse.com/#feat=css-grid
- a_humean 8y 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.
  - sbegaudeau 8y 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 8y 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 8y 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 8y ago
        Personally I find the idea of a bank supporting such an outdated browser disturbing on a security level.
        originalsimba 8y 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.
        itsmendy 8y ago
        Why?
        dspillett 8y 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. 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).
  - TomK32 8y ago
    https://caniuse.com/#search=grid 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%
    - zaarn 8y ago
      Don't underestimate the power of business customers using outdated software. (I have to support IE10 everytime and IE9 if possible)
    - dspillett 8y 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.
  - kaushalmodi 8y 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.
    - kumarharsh 8y ago
      Edge supports all CSS Grid properties.
    - koboll 8y ago
      IE11 does not autoupdate. Thus it is stuck, frozen in time, a deadweight clinging onto front-end web development.
      - guhidalg 8y ago
        Or, viewed another way, IE developers have a stable API surface to work on that isn't a moving target every hour.
        dak1 8y 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.
        talmand 8y ago
        What are IE developers?
        a_humean 8y ago
        Web Developers that do enterprise software.
- kumarharsh 8y 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 8y ago
    Do you happen to have any links/examples of this?
    - chocolateboy 8y ago
      https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ https://css-tricks.com/css-grid-in-ie-debunking-common-ie-gr...
  - andrei_says_ 8y ago
    IE10/11? Would love to see links for this.
- originalsimba 8y ago
  Which actually translates to like 99% of real user browsers.
irrational 8y 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 8y 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 8y 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 8y 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.
fullofsid 8y ago
This is a very old un-updated project and probably a repost
- lourot 8y 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 8y ago
    There's a difference between outdated and un-updated.
MrEfficiency 8y 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.
- bovermyer 8y ago
  What does this have to do with the post?
- george4n 8y 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 8y 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 8y 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 8y ago
      Who said that?
      - jandrese 8y 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.
projproj 8y ago
I created a related tool for testing different combinations of CSS grid rules. http://grids.help/ http://grids.help/
kjullien 8y ago
Anyone knows if a similar cheat sheet is available with a light theme for people like me with terrible eyesight ?
smaker1 8y ago
Just want to say, that's brilliantly simple use of css-grid. Nicely done. Thanks for the cheer sheet :)
malven 8y 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 8y ago
  While I'm here, I also created a similar visual cheatsheet for Flexbox that I still find very useful: http://flexbox.malven.co http://flexbox.malven.co

178 points by lourot 8y 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 https://caniuse.com/#feat=css-grid

a_humean 8y 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.
- sbegaudeau 8y 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 8y 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 8y 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 8y ago
      Personally I find the idea of a bank supporting such an outdated browser disturbing on a security level.
      - originalsimba 8y 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.
      - itsmendy 8y ago
        Why?
        dspillett 8y 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. 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).
- TomK32 8y ago
  https://caniuse.com/#search=grid 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%
  - zaarn 8y ago
    Don't underestimate the power of business customers using outdated software. (I have to support IE10 everytime and IE9 if possible)
  - dspillett 8y 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.
- kaushalmodi 8y 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.
  - kumarharsh 8y ago
    Edge supports all CSS Grid properties.
  - koboll 8y ago
    IE11 does not autoupdate. Thus it is stuck, frozen in time, a deadweight clinging onto front-end web development.
    - guhidalg 8y ago
      Or, viewed another way, IE developers have a stable API surface to work on that isn't a moving target every hour.
      - dak1 8y 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.
      - talmand 8y ago
        What are IE developers?
        a_humean 8y ago
        Web Developers that do enterprise software.
kumarharsh 8y 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 8y ago
  Do you happen to have any links/examples of this?
  - chocolateboy 8y ago
    https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ https://css-tricks.com/css-grid-in-ie-debunking-common-ie-gr...
- andrei_says_ 8y ago
  IE10/11? Would love to see links for this.
originalsimba 8y ago
Which actually translates to like 99% of real user browsers.

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

fullofsid 8y ago

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

lourot 8y 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 8y ago
  There's a difference between outdated and un-updated.

MrEfficiency 8y 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.

bovermyer 8y ago
What does this have to do with the post?
george4n 8y 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 8y 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 8y 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 8y ago
    Who said that?
    - jandrese 8y 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.

projproj 8y ago

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

kjullien 8y ago

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

smaker1 8y ago

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

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