sterling-css/dist/grids.css

A set of small CSS components suitable for any project.

/* ==========================================================================
   Grids
   ========================================================================== */

/* ==========================================================================
   Flexbox Grid
   ========================================================================== */

.s-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.s-column-1 {
  width: 8.333333333333334%;
}

.s-column-2 {
  width: 16.666666666666668%;
}

.s-column-3 {
  width: 25%;
}

.s-column-4 {
  width: 33.333333333333336%;
}

.s-column-5 {
  width: 41.66666666666667%;
}

.s-column-6 {
  width: 50%;
}

.s-column-7 {
  width: 58.333333333333336%;
}

.s-column-8 {
  width: 66.66666666666667%;
}

.s-column-9 {
  width: 75%;
}

.s-column-10 {
  width: 83.33333333333334%;
}

.s-column-11 {
  width: 91.66666666666667%;
}

.s-column-12 {
  width: 100%;
}

@media screen and (min-width: 48em) {

  .s-column-768-1 {
    width: 8.333333333333334%;
  }

  .s-column-768-2 {
    width: 16.666666666666668%;
  }

  .s-column-768-3 {
    width: 25%;
  }

  .s-column-768-4 {
    width: 33.333333333333336%;
  }

  .s-column-768-5 {
    width: 41.66666666666667%;
  }

  .s-column-768-6 {
    width: 50%;
  }

  .s-column-768-7 {
    width: 58.333333333333336%;
  }

  .s-column-768-8 {
    width: 66.66666666666667%;
  }

  .s-column-768-9 {
    width: 75%;
  }

  .s-column-768-10 {
    width: 83.33333333333334%;
  }

  .s-column-768-11 {
    width: 91.66666666666667%;
  }

  .s-column-768-12 {
    width: 100%;
  }
}

@media screen and (min-width: 64em) {

  .s-column-1024-1 {
    width: 8.333333333333334%;
  }

  .s-column-1024-2 {
    width: 16.666666666666668%;
  }

  .s-column-1024-3 {
    width: 25%;
  }

  .s-column-1024-4 {
    width: 33.333333333333336%;
  }

  .s-column-1024-5 {
    width: 41.66666666666667%;
  }

  .s-column-1024-6 {
    width: 50%;
  }

  .s-column-1024-7 {
    width: 58.333333333333336%;
  }

  .s-column-1024-8 {
    width: 66.66666666666667%;
  }

  .s-column-1024-9 {
    width: 75%;
  }

  .s-column-1024-10 {
    width: 83.33333333333334%;
  }

  .s-column-1024-11 {
    width: 91.66666666666667%;
  }

  .s-column-1024-12 {
    width: 100%;
  }
}