Syntax

This grid system uses a 12-column grid and is fully responsive. Columns are wrapped within a grid class.

<div class="grid">
  <div class="column-12 column-12">1</div>
</div>

Grid

Use column-* classes with values 1 through 12 to indicate the number of columns. By default, all columns are the same height.

<div class="grid">
  <div class="column-1">1</div>
  ...
  <div class="column-12">12</div>
</div>

Nesting

grid within a grid.

<div class="grid">
  <div class="column-12">column-12
    <div class="grid">
      <div class="column-12 column-4">column-4</div>
      <div class="column-12 column-4">column-4</div>
      <div class="column-12 column-4">column-4</div>
    </div>
  </div>
  ...
</div>

CSS Source:

.container {
    margin: auto;
    width: 100%;
}

.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.grid > [class*="column-"] {
	display: block;
}

.align-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}

.align-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
}

.column-1 {
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: 8.33333%;
}

.column-2 {
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%;
}

.column-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}

.column-4 {
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%;
}

.column-5 {
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: 41.66667%;
}

.column-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}

.column-7 {
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: 58.33333%;
}

.column-8 {
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: 66.66667%;
}

.column-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}

.column-10 {
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: 83.33333%;
}

.column-11 {
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: 91.66667%;
}

.column-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}