@mixin grid {
  display: grid;
  grid-template-rows: repeat(auto-fill);
}

@mixin inline-grid {
  display: inline-grid;
}

@mixin grid-columns ($column-count: 2) {
  grid-template-columns: repeat($column-count, minmax(0, 1fr));
}



@mixin grid-gap ($column-gap: 0, $row-gap: $column-gap) {
  @include grid-column-gap($column-gap);

  @if variable-exists(row-gap) and $row-gap != null {
    @include grid-row-gap($row-gap);
  }

}

@mixin grid-column-gap ($column-gap) {
  grid-column-gap: $column-gap;
}

@mixin grid-row-gap ($row-gap) {
  grid-row-gap: $row-gap;
}



// Hack to enforce square cells
// https://css-tricks.com/aspect-ratios-grid-items/
@mixin square-grid-cell {
  &:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0;
    padding-bottom: 100%;
  }
}