@gitlab/ui/src/scss/utility-mixins/grid.scss

/**
* Grid utilities
*
* naming convention: gl-grid-{breakpoint?}-{property}-{value?}
*/
@mixin gl-grid-tpl-rows-auto {
  grid-template-rows: auto;
}

@mixin gl-grid-col-start-1 {
  grid-column-start: 1;
}

@mixin gl-grid-template-columns-2 {
  grid-template-columns: 1fr 1fr;
}

@mixin gl-sm-grid-template-columns-2 {
  @include gl-media-breakpoint-up(sm) {
    grid-template-columns: 1fr 1fr;
  }
}

@mixin gl-md-grid-template-columns-2 {
  @include gl-media-breakpoint-up(md) {
    grid-template-columns: 1fr 1fr;
  }
}

@mixin gl-md-grid-template-columns-3 {
  @include gl-media-breakpoint-up(md) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@mixin gl-grid-template-columns-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@mixin gl-md-grid-template-columns-4 {
  @include gl-media-breakpoint-up(md) {
    grid-template-columns: repeat(4, 1fr);
  }
}

@mixin gl-lg-grid-template-columns-4 {
  @include gl-media-breakpoint-up(lg) {
    grid-template-columns: repeat(4, 1fr);
  }
}