layout_03_grid-mixin-fallback.scss

$gap-horizontal: 10px;
$gap-vertical: $gap-horizontal;

@mixin grid {
  // fallback for IE
  &::before, &::after {
    content: '';
    display: table;
  }
  
  &::after {
    clear: both;
  }

  > * {
    float: left;
    margin-right: $gap-horizontal;
    margin-bottom: $gap-vertical;
  }
  
  @supports(grid-area: auto) {
    //CSS Grid style
    display: grid;
    grid-column-gap: $gap-horizontal;
    grid-row-gap: $gap-vertical;
    
    &::after, &::before {
      content: none;
    }
    
    > * {
      margin-right: 0;
      margin-bottom: 0;
    }
  }
}