div.container {
  width: 100%;
}

.grid {
  float: left;
}

/* for none groupded columns */
.grid-1 {
  width: 8.33333%;
}

.grid-2 {
  width: 16.66666%;
}

.grid-3 {
  width: 25%;
}

.grid-4 {
  width: 33.33333%;
}

.grid-5 {
  width: 41.66666%;
}

.grid-6 {
  width: 50%;
}

.grid-7 {
  width: 58.33333%;
}

.grid-8 {
  width: 66.66666%;
}

.grid-9 {
  width: 75%;
}

.grid-10 {
  width: 83.33333%;
}

.grid-11 {
  width: 91.66666%;
}

.grid-12 {
  width: 100%;
}

/* for grouped 12 columns */
.group-12 .grid-1 {
  width: 8.33333%;
}
.group-12 .grid-2 {
  width: 16.66666%;
}
.group-12 .grid-3 {
  width: 25%;
}
.group-12 .grid-4 {
  width: 33.33333%;
}
.group-12 .grid-5 {
  width: 41.66666%;
}
.group-12 .grid-6 {
  width: 50%;
}
.group-12 .grid-7 {
  width: 58.33333%;
}
.group-12 .grid-8 {
  width: 66.66666%;
}
.group-12 .grid-9 {
  width: 75%;
}
.group-12 .grid-10 {
  width: 83.33333%;
}
.group-12 .grid-11 {
  width: 91.66666%;
}
.group-12 .grid-12 {
  width: 100%;
}
/* for grouped 11 columns */
.group-11 .grid-1 {
  width: 9.0909%;
}
.group-11 .grid-2 {
  width: 18.18181%;
}
.group-11 .grid-3 {
  width: 27.27272%;
}
.group-11 .grid-4 {
  width: 36.36363%;
}
.group-11 .grid-5 {
  width: 45.45454%;
}
.group-11 .grid-6 {
  width: 54.54545%;
}
.group-11 .grid-7 {
  width: 63.63636%;
}
.group-11 .grid-8 {
  width: 72.72727%;
}
.group-11 .grid-9 {
  width: 81.81818%;
}
.group-11 .grid-10 {
  width: 90.90909%;
}
.group-11 .grid-11 {
  width: 100%;
}
/* for grouped 10 columns */
.group-10 .grid-1 {
  width: 10%;
}
.group-10 .grid-2 {
  width: 20%;
}
.group-10 .grid-3 {
  width: 30%;
}
.group-10 .grid-4 {
  width: 40%;
}
.group-10 .grid-5 {
  width: 50%;
}
.group-10 .grid-6 {
  width: 60%;
}
.group-10 .grid-7 {
  width: 70%;
}
.group-10 .grid-8 {
  width: 80%;
}
.group-10 .grid-9 {
  width: 90%;
}
.group-10 .grid-10 {
  width: 100%;
}
/* for grouped 9 columns */
.group-9 .grid-1 {
  width: 11.11111%;
}
.group-9 .grid-2 {
  width: 22.22222%;
}
.group-9 .grid-3 {
  width: 33.33333%;
}
.group-9 .grid-4 {
  width: 44.44444%;
}
.group-9 .grid-5 {
  width: 55.55555%;
}
.group-9 .grid-6 {
  width: 66.66666%;
}
.group-9 .grid-7 {
  width: 77.77777%;
}
.group-9 .grid-8 {
  width: 88.88888%;
}
.group-9 .grid-9 {
  width: 100%;
}
/* for grouped 8 columns */
.group-8 .grid-1 {
  width: 12.5%;
}
.group-8 .grid-2 {
  width: 25%;
}
.group-8 .grid-3 {
  width: 37.5%;
}
.group-8 .grid-4 {
  width: 50%;
}
.group-8 .grid-5 {
  width: 62.5%;
}
.group-8 .grid-6 {
  width: 75%;
}
.group-8 .grid-7 {
  width: 87.5%;
}
.group-8 .grid-8 {
  width: 100%;
}
/* for grouped 7 columns */
.group-7 .grid-1 {
  width: 14.28571%;
}
.group-7 .grid-2 {
  width: 28.57142%;
}
.group-7 .grid-3 {
  width: 42.85714%;
}
.group-7 .grid-4 {
  width: 57.14285%;
}
.group-7 .grid-5 {
  width: 71.42857%;
}
.group-7 .grid-6 {
  width: 85.71428%;
}
.group-7 .grid-7 {
  width: 100%;
}
/* for grouped 6 columns */
.group-6 .grid-1 {
  width: 16.66666%;
}
.group-6 .grid-2 {
  width: 33.33333%;
}
.group-6 .grid-3 {
  width: 50%;
}
.group-6 .grid-4 {
  width: 66.66666%;
}
.group-6 .grid-5 {
  width: 83.33333%;
}
.group-6 .grid-6 {
  width: 100%;
}
/* for grouped 5 columns */
.group-5 .grid-1 {
  width: 20%;
}
.group-5 .grid-2 {
  width: 40%;
}
.group-5 .grid-3 {
  width: 60%;
}
.group-5 .grid-4 {
  width: 80%;
}
.group-5 .grid-5 {
  width: 100%;
}
/* for grouped 4 columns */
.group-4 .grid-1 {
  width: 25%;
}
.group-4 .grid-2 {
  width: 50%;
}
.group-4 .grid-3 {
  width: 75%;
}
.group-4 .grid-4 {
  width: 100%;
}
/* for grouped 3 columns */
.group-3 .grid-1 {
  width: 33.33333%;
}
.group-3 .grid-2 {
  width: 66.66666%;
}
.group-3 .grid-3 {
  width: 100%;
}
/* for grouped 2 columns */
.group-2 .grid-1 {
  width: 50%;
}
.group-2 .grid-2 {
  width: 100%;
}
/* for grouped 1 columns */
.group-1 .grid-1 {
  width: 100%;
}