Last active
January 2, 2019 12:37
-
-
Save sloyless/dda34c2d7c982525dadd4427a25898eb to your computer and use it in GitHub Desktop.
CSS Grid with Flexbox fallback
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Based on https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/ | |
| // This CSS Grid mixin and styles allow modern browsers to use the newer display: grid functionality, | |
| // but allow a fallback to Flexbox to support older browsers like IE 11. | |
| @mixin basic-styles { | |
| display: flex; | |
| align-items: center; // Vertically center all content | |
| } | |
| @mixin grid-child ($col-start, $col-end, $row-start, $row-end) { | |
| -ms-grid-column: $col-start; | |
| -ms-grid-column-span: $col-end - $col-start; | |
| -ms-grid-row: $row-start; | |
| -ms-grid-row-span: $row-end - $row-start; | |
| grid-column: #{$col-start}/#{$col-end}; | |
| grid-row: #{$row-start}/#{$row-end}; | |
| } | |
| .grid-parent { | |
| display: -ms-grid; | |
| @supports (display: grid) { // Modern browser support | |
| display: grid; | |
| } | |
| } | |
| .grid-child { | |
| @include basic-styles; | |
| @supports (display: grid) { | |
| grid-gap: 20px; | |
| } | |
| } | |
| .container { | |
| -ms-grid-columns: 1fr 2fr 1fr; | |
| grid-template-columns: 1fr 2fr 1fr; | |
| } | |
| .column1 { | |
| @include grid-child(1,2,1,1); | |
| } | |
| .column2 { | |
| @include grid-child(2,3,1,1); | |
| } | |
| .column3 { | |
| @include grid-child(3,3,1,1); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment