Skip to content

Instantly share code, notes, and snippets.

@FellowshipAgency
Created September 6, 2018 11:21
Show Gist options
  • Save FellowshipAgency/ab680f60343e0c800e4f8204aad94d56 to your computer and use it in GitHub Desktop.
Save FellowshipAgency/ab680f60343e0c800e4f8204aad94d56 to your computer and use it in GitHub Desktop.
Easily disable CSS Grid
// To easily view how a site looks when CSS Grid is not available, use this in the SASS file.
// First you need this variable:
$cssgrid: "(grid-template-rows:initial)";
// Then you can uncomment the below to re-declare the variable and so disable the @supports for every browser:
// $cssgrid: "(display:no-css-grid-support)";
// Wrap every usage of CSS Grid in this:
@supports(#{$cssgrid}) {
display: grid;
grid-template-rows: 1fr 1fr;
}
@FellowshipAgency
Copy link
Author

You can also use this to check if something doesn't support CSS grid:

@supports (not #{$cssgrid}) {
// Fallback code here
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment