SCSS Grid Layout with fallback for IE
This repository includes a responsive css grid layout with a fallback for browsers without support for grid-gap like IE.
Setup
Install
Install with npm:
$ npm install --save scss-grid-layout
Install with yarn:
$ yarn add scss-grid-layout
Import
@import "../../../node_modules/scss-grid-layout/src/layout";
Import this file after your own variables which overwrite the default
Overwrite the !default variables
; ; ; ; ;
Usage
Grid
or
col--2-5
Gives you a column which start at column 2 and ends at column 5.
Breakpoints
@include grid-media(md) { // @media and (min-width: 1024px)
...
}
or
@include grid-media(md, max) { // @media and (max-width: 1024px)
...
}
If you add max
as second variable, it gives you max-width
Support
Chrome | Safari | Firefox | Edge | IE |
---|---|---|---|---|
Yes | Yes | Yes | Yes | ✨ YES ✨ |
There is a fallback for browsers without support for grid-gap. For this browsers the layout is styled with Flexbox instead of Css grid.