Add offset helper classes

[j1mie]

Adds offset helper classes .#{$prefix}-grid__offset--[x] to complement helper classes for columns.

For example the following:

<div class="bx-grid__col--sm--4 bx-grid__offset--sm--4">Element</div>

Would use the these rules for CSS grid:

.bx-grid__offset--sm--4.bx-grid__col--sm--4 {
    grid-column: 5 / span 4; 
}

And for legacy / flex:

.bx-grid__offset--sm--4 {
  margin-left: calc((100vw - 10vw) * 0.3333);
  margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.3333); 
}

Interested in hearing your thoughts @seejamescode

[seejamescode]

This looks helpful! I’m looking at the legacy files. It looks like each offset needs only one selector for Flexbox, but another selector for each column in the grid. This probably means that we should switch from grid-column to grid-column-start and grid-column-end (#34). Can you make that change, @j1mie?

[j1mie]

@seejamescode Absolutely! Will update shortly.