ionic-framework/scss/_grid.scss

/**
 * Grid
 * --------------------------------------------------
 * Using flexbox for the grid, inspired by Philip Walton:
 * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
 */

.grid {
  @include display-flex();
}

.grid-cell {
  @include flex(1);
}

/* With gutters */
.grid-gutters {
  margin-left: $grid-gutter-width * -1;
}
.grid-gutters > .grid-cell {
  padding-left: $grid-gutter-width;
}

/* Alignment per row */
.grid-top {
  @include align-items(flex-start);
}
.grid-bottom {
  @include align-items(flex-end);
}
.grid-center {
  @include align-items(center);
}

/* Alignment per cell */
.grid-cell-top {
  @include align-self(flex-start);
}
.grid-cell-bottom {
  @include align-self(flex-end);
}
.grid-cell-center {
  @include align-self(center);
}

/* Base classes for all media */
.grid-fit > .grid-cell {
  @include flex(1);
}
.grid-full > .grid-cell {
  @include flex(0, 0, 100%);
}
.grid-1of2 > .grid-cell, 
.grid-2of4 > .grid-cell,
.grid-3of6 > .grid-cell {
  @include flex(0, 0, 50%);
}
.grid-1of3 > .grid-cell, 
.grid-2of6 > .grid-cell {
  @include flex(0, 0, 33.3333%);
}
.grid-2of3 > .grid-cell,
.grid-4of6 > .grid-cell {
  @include flex(0, 0, 66.6666%);
}
.grid-1of4 > .grid-cell {
  @include flex(0, 0, 25%);
}
.grid-3of4 > .grid-cell {
  @include flex(0, 0, 75%);
}
.grid-1of5 > .grid-cell {
  @include flex(0, 0, 20%);
}
.grid-2of5 > .grid-cell {
  @include flex(0, 0, 40%);
}
.grid-3of5 > .grid-cell {
  @include flex(0, 0, 60%);
}
.grid-4of5 > .grid-cell {
  @include flex(0, 0, 80%);
}
.grid-1of6 > .grid-cell {
  @include flex(0, 0, 16.6666%);
}
.grid-5of6 > .grid-cell {
  @include flex(0, 0, 83.3333%);
}