Simple grid system

by doug65536

HTML

<div class="col-xs-12">
    <div class="col-xs-1">1
    </div>
    <div class="col-xs-1">2
    </div>
    <div class="col-offset-xs-2 col-xs-1">5
    </div>
    <div class="col-xs-1">6
    </div>
    <div class="col-xs-1">7
    </div>
    <div class="col-xs-1">8
    </div>
    <div class="col-xs-1">9
    </div>
    <div class="col-xs-1">10
    </div>
    <div class="col-xs-1">11
    </div>
    <div class="col-xs-1">12
    </div>
</div>

CSS

html, body {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    display: inline-block;
    box-sizing: border-box;
    margin: 0px;
    border: solid black 1px;
    float: left;
}
.col-xs-1 {
    width: 8.333333333333333%;
}
.col-xs-2 {
    width: 16.66666666666666%;
}
.col-xs-3 {
    width: 25%;
}
.col-xs-4 {
    width: 33.33333333333333%;
}
.col-xs-5 {
    width: 41.66666666666666%;
}
.col-xs-6 {
    width: 50%;
}
.col-xs-7 {
    width: 58.33333333333333%;
}
.col-xs-8 {
    width: 66.66666666666666%;
}
.col-xs-9 {
    width: 75%;
}
.col-xs-10 {
    width: 83.33333333333333%;
}
.col-xs-11 {
    width: 91.66666666666666%;
}
.col-xs-12 {
    width: 100%;
}

.col-offset-xs-1 {
    margin-left: 8.333333333333333%;
}
.col-offset-xs-2 {
    margin-left: 16.66666666666666%;
}
.col-offset-xs-3 {
    margin-left: 25%;
}
.col-offset-xs-4 {
    margin-left: 33.33333333333333%;
}
.col-offset-xs-5 {
    margin-left: 41.66666666666666%;
}
.col-offset-xs-6 {
    margin-left: 50%;
}
.col-offset-xs-7 {
    margin-left: 58.33333333333333%;
}
.col-offset-xs-8 {
    margin-left: 66.66666666666666%;
}
.col-offset-xs-9 {
    margin-left: 75%;
}
.col-offset-xs-10 {
    margin-left: 83.33333333333333%;
}
.col-offset-xs-11 {
    margin-left: 91.66666666666666%;
}
.col-offset-xs-12 {
    margin-left: 100%;
}