SCSS mixin's for css grid containers and css grid items

_css-grid-mixins.scss

// Combines some of the common grid item attributes to simplify usage.
@mixin grid-item($gridcolumnstart: false, $gridcolumnend: false, $gridrowstart: false, $gridrowend: false, $gridarea: false, $justifyself: false, $alignself: false) {
  //values:
  //  $gridcolumnstart: <line> | span <number> | span <name> | auto
  //  $gridcolumnend: <line> | span <number> | span <name> | auto
  //  $gridrowstart: <line> | span <number> | span <name> | auto
  //  $gridrowend: <line> | span <number> | span <name> | auto
  //  $gridarea: <name> | <row-start> / <column-start> / <row-end> / <column-end>
  //  $justifyself: start | end | center | stretch
  //  $alignself: start | end | center | stretch

  // scss-lint doesn't recognize the following grid properties.
  // scss-lint:disable PropertySpelling
  @if $gridcolumnstart {
    grid-column-start: $gridcolumnstart;
  }
  @if $gridcolumnend {
    grid-column-end: $gridcolumnend;
  }
  @if $gridrowstart {
    grid-row-start: $gridrowstart;
  }
  @if $gridrowend {
    grid-row-end: $gridrowend;
  }
  // scss-lint:enable PropertySpelling
  @if $gridarea {
    grid-area: $gridarea;
  }
  @if $justifyself {
    justify-self: $justifyself;
  }
  @if $alignself {
    align-self: $alignself;
  }
}

// Combines some of the common grid container attributes to simplify usage.
@mixin grid-container($display: grid, $gridtemplatecolumns: 1fr, $gridtemplaterows: auto, $gridtemplateareas: false, $gridcolumngap: false, $gridrowgap: false, $gridautocolumns: false, $gridautorows: false, $gridautoflow:false, $justifyitems: false, $justifycontent: false, $alignitems: false, $aligncontent: false) {
  //values:
  //  $display: grid(default) | inline-grid | subgrid
  //  $gridtemplatecolumns: <track-size> | <line-name>
  //  $gridtemplaterows: <track-size> | <line-name>
  //  $gridtemplateareas: <grid-area-name> | . | none
  //  $gridcolumngap: <line-size>
  //  $gridrowgap: <line-size>
  //  $gridautocolumns: <track-size>
  //  $gridautorows: <track-size>
  //  $gridautoflow: row | column | dense
  //  $justifyitems: start | end | center | stretch
  //  $justifycontent: start | end | center | space-between | space-around | stretch | space-evenly
  //  $alignitems: start | end | center | stretch
  //  $aligncontent: start | end | center | space-between | space-around | stretch | space-evenly

  display: $display;
  // scss-lint doesn't recognize the following grid properties.
  // scss-lint:disable PropertySpelling
  // We use long hand so as not to confuse IE.
  grid-template-columns: $gridtemplatecolumns;
  grid-template-rows: $gridtemplaterows;

  @if $justifyitems {
    justify-items: $justifyitems;
  }
  @if $gridcolumngap {
    grid-column-gap: $gridcolumngap;
  }
  @if $gridrowgap {
    grid-row-gap: $gridrowgap;
  }
  // scss-lint:enable PropertySpelling
  @if $gridtemplateareas {
    grid-template-areas: $gridtemplateareas;
  }
  @if $gridautocolumns {
    grid-auto-columns: $gridautocolumns;
  }
  @if $gridautorows {
    grid-auto-rows: $gridautorows;
  }
  @if $gridautoflow {
    grid-auto-flow: $gridautoflow;
  }
  @if $justifycontent {
    justify-content: $justifycontent;
  }
  @if $alignitems {
    align-items: $alignitems;
  }
  @if $aligncontent {
    align-content: $aligncontent;
  }
}