@if $html-grid-classes {
  * {
    box-sizing: border-box;
  }

  .us-container {
    @extend %container;
  }

  .us-grid-row {
    @include us-row;
  }
  
  @include respond-to($default-grid-breakpoint, false, true) {
    @for $column from 1 through $grid-columns {
      .us-col-#{$column} {
        @include us-col($column);
        min-height: 1px;
      }
    }
  }
}

// Placeholders

@for $column from 1 through $grid-columns {
  @include _grid-class("us-col-xsm", $column);
}

@include respond-to(small-tablet) {
  @for $column from 1 through $grid-columns {
    @include _grid-class("us-col-sm", $column);
  }
}

@include respond-to(tablet, false, true) {
  @for $column from 1 through $grid-columns {
    @include _grid-class("us-col-md", $column);
  }
}

@include respond-to(desktop, false, true) {
  @for $column from 1 through $grid-columns {
    @include _grid-class("us-col-lg", $column);
  }
}

@include respond-to(large-desktop, false, false) {
  @for $column from 1 through $grid-columns {
    @include _grid-class("us-col-xlg", $column);
  }
}