Skip to content

Instantly share code, notes, and snippets.

@wiegertschouten

wiegertschouten/grid.scss

Created October 1, 2020 18:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wiegertschouten/443f7e061d1fc656b229ac4b5b0faece to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wiegertschouten/443f7e061d1fc656b229ac4b5b0faece to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wiegertschouten created this gist Oct 1, 2020.
    43 changes: 43 additions & 0 deletions grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    $columns: 12;
    $gap: 30px;
    $breakpoints: (
    xs: 480px,
    sm: 768px,
    md: 960px,
    lg: 1170px,
    xl: 1280px
    );

    @mixin create-selectors($breakpoint: null) {
    $infix: if($breakpoint == null, '', '-#{$breakpoint}');

    @for $i from 1 through $columns {
    .col#{$infix}-#{$i} {
    grid-column-end: span $i;
    }
    .col-offset#{$infix}-#{$i} {
    grid-column-start: $i + 1;
    }
    .row#{$infix}-#{$i} {
    grid-row-end: span $i;
    }
    .row-offset#{$infix}-#{$i} {
    grid-row-start: $i + 1;
    }
    }
    }

    .grid {
    display: grid;
    grid-template-columns: repeat($columns, 1fr);
    grid-gap: $gap;
    gap: $gap;
    }

    @include create-selectors;

    @each $breakpoint, $width in $breakpoints {
    @media (min-width: $width) {
    @include create-selectors($breakpoint);
    }
    }