KNACSS/css/02-grids.css

/* grids inspired from SUIT https://github.com/suitcss/suit */

/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */

.grid {
  overflow: hidden;
  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
}

.grid > * {
  display: block;
  padding: 0;
  margin-left: -20px;
  /* gutter value */
  text-align: left;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

/* Opera hack */

.opera:-o-prefocus,
.grid > * {
  word-spacing: -0.43em;
}

.grid > * > * {
  display: inline-block;
  width: 100%;
  padding-left: 20px;
  /* gutter value */
  margin-left: 0;
  vertical-align: top;
  text-align: left;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
  *display: inline;
  *zoom: 1;
  /* IE67 hack */
  font-family: Helvetica, Arial, sans-serif;
}

.grid2 > * {
  width: 50%;
}

.grid3 > * {
  width: 33.333%;
}

.grid4 > * {
  width: 25%;
}

.grid5 > * {
  width: 20%;
}

.grid6 > * {
  width: 16.667%;
}

.grid8 > * {
  width: 12.5%;
}

.grid10 > * {
  width: 10%;
}

.grid12 > * {
  width: 8.333%;
}

/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */

.grid2-1 > *:first-child,
.grid1-2 > * + * {
  width: 66.666%;
}

.grid1-2 > *:first-child,
.grid2-1 > * + * {
  width: 33.333%;
}

.grid1-3 > *:first-child,
.grid3-1 > * + * {
  width: 25%;
}

.grid3-1 > *:first-child,
.grid1-3 > * + * {
  width: 75%;
}

/* Responsiv-o-matic */

@media (max-width: 1280px) {
  .grid5 > *,
  .grid6 > *,
  .grid8 > *,
  .grid10 > *,
  .grid12 > * {
    width: 33.333%;
  }
}

@media (max-width: 768px) {
  .grid3 > *,
  .grid4 > *,
  .grid5 > *,
  .grid6 > *,
  .grid8 > *,
  .grid10 > *,
  .grid12 > * {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .grid > * > * {
    width: 100% !important;
  }
}