Offsetting within the grid framework allows you to “skip” base columns so that your content will start more toward the center of the page.
To offset, you can simply add a “offset-by-x” class to each <div> tag (along with the number of columns the division should extend over), replacing the “x” with the spelled out number of columns to offset by.
You can offset by as little as one (<div class="offset-by-one six columns">) or as many as 15 columns (<div class="offset-by-fifteen one column">). Offsetting by 16 columns isn’t available because that would essentially just push everything to a new row.
When using offsetting, you then need to account for the offset base columns when considering the limit of 16.
For example, if you offset by three columns and then use five columns, you’ve used eight of the 16 available base columns, so there are eight left to use.
On the other hand, if you offset by eight columns, then have a three column division and a six column division, this would not work because 8 + 3 + 6 = 17. In this case, the last column division would cause the layout to break.
Technically speaking, you could achieve a similar result to using offset tags by simply leaving blank column divisions. However, this can cause unwanted blank spaces on mobile devices because the blank columns still have to be accounts for when the columns become stacked, whereas offsetting will prevent extra space from appearing.
For a shortcut to creating multiple columns with HTML check out the Out of the Sandbox Content Creator Extension for Google Chrome: