CSS: How to add classes to existing grid that allow skipping columns on the left side

Question

I am trying to set up a simple column grid without the use of a library. So far I have the below which works as intended (at least good enough for me to learn).

What I couldn't figure out is how I can set a class style to skip a number of columns on the left side so that a div doesn't go across the whole screen width.

E.g. I would like to set up a class to skip the first column and then span 10 columns (83.33%) so that in the end I have a "blank" column on the left and right edge of the screen.

The only thing I could think of here was using some kind of placeholder divs with just a col class and no content but I don't think that's good practice.

Can someone tell me how to do this properly, e.g. by using some kind of indenting ? This can be a combination of two classes as well so that it can be combined with any of the existing col classes.

My CSS:

.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66%;
}
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

Many thanks in advance.

Answer 1

I think you're looking for an offset property. This is done by Twitter Bootstrap for example: http://getbootstrap.com/css/#grid-offsetting.

This stackoverflow topics could help:
CSS offset in Bootstrap-like grid
How to offset div columns in CSS grid system