ildi-wp/dev/scss/generic/_grid.scss

.grid {
  display: grid;
  grid-template-columns: 1fr;

  &.grid-gutter    { grid-gap: $gutter; }
  &.grid-gutter-lg { grid-gap: $gutter * 2; }

  &.grid-start { align-items: start; }
  &.grid-center { align-items: center; }
  &.grid-end { align-items: end; }

  &.col-100      { grid-template-columns: 1fr; }
  &.col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  &.col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
  &.col-33       { grid-template-columns: 1fr 1fr 1fr; }
  &.col-50       { grid-template-columns: 1fr 1fr; }
  &.col-70-30    { grid-template-columns: 2fr 1fr; }
  &.col-30-70    { grid-template-columns: 1fr 2fr; }
  &.col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
  &.col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
  &.col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
  &.col-25-75    { grid-template-columns: 1fr 3fr; }
  &.col-75-25    { grid-template-columns: 3fr 1fr; }
}

//////////////////////////
// desktop first classes
//////////////////////////

@media screen and (max-width: #{$screen-desktop-lg - 1}) {
  .grid {
    &.col-100-lg      { grid-template-columns: 1fr; }
    &.col-20-lg       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.col-25-lg       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.col-33-lg       { grid-template-columns: 1fr 1fr 1fr; }
    &.col-50-lg       { grid-template-columns: 1fr 1fr; }
    &.col-70-30-lg    { grid-template-columns: 2fr 1fr; }
    &.col-30-70-lg    { grid-template-columns: 1fr 2fr; }
    &.col-50-25-25-lg { grid-template-columns: 2fr 1fr 1fr; }
    &.col-25-50-25-lg { grid-template-columns: 1fr 2fr 1fr; }
    &.col-25-25-50-lg { grid-template-columns: 1fr 1fr 2fr; }
    &.col-25-75-lg    { grid-template-columns: 1fr 3fr; }
    &.col-75-25-lg    { grid-template-columns: 3fr 1fr; }
  }
}

@media screen and (max-width: #{$screen-desktop - 1}) {
  .grid {
    &.col-100-md      { grid-template-columns: 1fr; }
    &.col-20-md       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.col-25-md       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.col-33-md       { grid-template-columns: 1fr 1fr 1fr; }
    &.col-50-md       { grid-template-columns: 1fr 1fr; }
    &.col-70-30-md    { grid-template-columns: 2fr 1fr; }
    &.col-30-70-md    { grid-template-columns: 1fr 2fr; }
    &.col-50-25-25-md { grid-template-columns: 2fr 1fr 1fr; }
    &.col-25-50-25-md { grid-template-columns: 1fr 2fr 1fr; }
    &.col-25-25-50-md { grid-template-columns: 1fr 1fr 2fr; }
    &.col-25-75-md    { grid-template-columns: 1fr 3fr; }
    &.col-75-25-md    { grid-template-columns: 3fr 1fr; }
  }
}

@media screen and (max-width: #{$screen-tablet-lg - 1}) {
  .grid {
    &.col-100-sm      { grid-template-columns: 1fr; }
    &.col-20-sm       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.col-25-sm       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.col-33-sm       { grid-template-columns: 1fr 1fr 1fr; }
    &.col-50-sm       { grid-template-columns: 1fr 1fr; }
    &.col-70-30-sm    { grid-template-columns: 2fr 1fr; }
    &.col-30-70-sm    { grid-template-columns: 1fr 2fr; }
    &.col-50-25-25-sm { grid-template-columns: 2fr 1fr 1fr; }
    &.col-25-50-25-sm { grid-template-columns: 1fr 2fr 1fr; }
    &.col-25-25-50-sm { grid-template-columns: 1fr 1fr 2fr; }
    &.col-25-75-sm    { grid-template-columns: 1fr 3fr; }
    &.col-75-25-sm    { grid-template-columns: 3fr 1fr; }
  }
}

@media screen and (max-width: #{$screen-tablet - 1}) {
  .grid {
    &.col-100-xs      { grid-template-columns: 1fr; }
    &.col-20-xs       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.col-25-xs       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.col-33-xs       { grid-template-columns: 1fr 1fr 1fr; }
    &.col-50-xs       { grid-template-columns: 1fr 1fr; }
    &.col-70-30-xs    { grid-template-columns: 2fr 1fr; }
    &.col-30-70-xs    { grid-template-columns: 1fr 2fr; }
    &.col-50-25-25-xs { grid-template-columns: 2fr 1fr 1fr; }
    &.col-25-50-25-xs { grid-template-columns: 1fr 2fr 1fr; }
    &.col-25-25-50-xs { grid-template-columns: 1fr 1fr 2fr; }
    &.col-25-75-xs    { grid-template-columns: 1fr 3fr; }
    &.col-75-25-xs    { grid-template-columns: 3fr 1fr; }
  }
}


//////////////////////////
// mobile first classes
//////////////////////////


@media screen and (min-width: #{$screen-tablet}) {
  .grid {
    &.sm-col-100      { grid-template-columns: 1fr; }
    &.sm-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.sm-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.sm-col-33       { grid-template-columns: 1fr 1fr 1fr; }
    &.sm-col-50       { grid-template-columns: 1fr 1fr; }
    &.sm-col-70-30    { grid-template-columns: 2fr 1fr; }
    &.sm-col-30-70    { grid-template-columns: 1fr 2fr; }
    &.sm-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
    &.sm-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
    &.sm-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
    &.sm-col-25-75    { grid-template-columns: 1fr 3fr; }
    &.sm-col-75-25    { grid-template-columns: 3fr 1fr; }
  }
}

@media screen and (min-width: #{$screen-tablet-lg}) {
  .grid {
    &.md-col-100      { grid-template-columns: 1fr; }
    &.md-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.md-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.md-col-33       { grid-template-columns: 1fr 1fr 1fr; }
    &.md-col-50       { grid-template-columns: 1fr 1fr; }
    &.md-col-70-30    { grid-template-columns: 2fr 1fr; }
    &.md-col-30-70    { grid-template-columns: 1fr 2fr; }
    &.md-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
    &.md-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
    &.md-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
    &.md-col-25-75    { grid-template-columns: 1fr 3fr; }
    &.md-col-75-25    { grid-template-columns: 3fr 1fr; }
  }
}

@media screen and (min-width: #{$screen-desktop}) {
  .grid {
    &.lg-col-100      { grid-template-columns: 1fr; }
    &.lg-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.lg-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.lg-col-33       { grid-template-columns: 1fr 1fr 1fr; }
    &.lg-col-50       { grid-template-columns: 1fr 1fr; }
    &.lg-col-70-30    { grid-template-columns: 2fr 1fr; }
    &.lg-col-30-70    { grid-template-columns: 1fr 2fr; }
    &.lg-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
    &.lg-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
    &.lg-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
    &.lg-col-25-75    { grid-template-columns: 1fr 3fr; }
    &.lg-col-75-25    { grid-template-columns: 3fr 1fr; }
  }
}

@media screen and (min-width: #{$screen-desktop-lg}) {
  .grid {
    &.xl-col-100      { grid-template-columns: 1fr; }
    &.xl-col-20       { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    &.xl-col-25       { grid-template-columns: 1fr 1fr 1fr 1fr; }
    &.xl-col-33       { grid-template-columns: 1fr 1fr 1fr; }
    &.xl-col-50       { grid-template-columns: 1fr 1fr; }
    &.xl-col-70-30    { grid-template-columns: 2fr 1fr; }
    &.xl-col-30-70    { grid-template-columns: 1fr 2fr; }
    &.xl-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
    &.xl-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
    &.xl-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
    &.xl-col-25-75    { grid-template-columns: 1fr 3fr; }
    &.xl-col-75-25    { grid-template-columns: 3fr 1fr; }
  }
}