.grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}
            
.grid::after {
    clear: both;
    content: "";
    display: table;
}
            
.grid-col-1,
.grid-col-2,
.grid-col-3,
.grid-col-4,
.grid-col-5,
.grid-col-6,
.grid-col-7,
.grid-col-8,
.grid-col-9,
.grid-col-10,
.grid-col-11,
.grid-col-12 {
    float: left;
    box-sizing: border-box;
    padding: 0.5em;
}

.grid-col-1 {
    width: 8.3333%;
}

.grid-col-2 {
    width: 16.6667%;
}

.grid-col-3 {
    width: 25%;
}

.grid-col-4 {
    width: 33.3333%;
}

.grid-col-5 {
    width: 41.6667%;
}

.grid-col-6 {
    width: 50%;
}

.grid-col-7 {
    width: 58.3333%;
}

.grid-col-8 {
    width: 66.6667%;
}

.grid-col-9 {
    width: 75%;
}

.grid-col-10 {
    width: 83.3333%;
}

.grid-col-11 {
    width: 91.6667%;
}

.grid-col-12 {
    width: 100%;
}

.grid-col-offset-12 {
  margin-left: 100%;
}

.grid-col-offset-11 {
  margin-left: 91.66666667%;
}

.grid-col-offset-10 {
  margin-left: 83.33333333%;
}

.grid-col-offset-9 {
  margin-left: 75%;
}

.grid-col-offset-8 {
  margin-left: 66.66666667%;
}

.grid-col-offset-7 {
  margin-left: 58.33333333%;
}

.grid-col-offset-6 {
  margin-left: 50%;
}

.grid-col-offset-5 {
  margin-left: 41.66666667%;
}

.grid-col-offset-4 {
  margin-left: 33.33333333%;
}

.grid-col-offset-3 {
  margin-left: 25%;
}

.grid-col-offset-2 {
  margin-left: 16.66666667%;
}

.grid-col-offset-1 {
  margin-left: 8.33333333%;
}

.grid-col-offset-0 {
  margin-left: 0%;
}