Overlapping and source order

The unique structure of the Gridset CSS allows for some interesting layout opportunities using the *-overlap class.

Please note: You must put the *-overlap class on the first overlapping, or out-of-order element. This is usually the second element in the source order.

This class will add a style of clear:none to the element that moves it into place, rather than breaking to a new line.

Overlapping

You can now overlap elements by merely setting their classes to the same column(s) and adding a class of *-overlap to the proceeding element (where * is your grid prefix).

For example, if you have created a six-column grid with the prefix of ‘d’, you could overlap two items with ease:

<article class="d1-d4">
    …
</article>
<article class="d4-d6 d-overlap">
 …
</article>

These two articles would now overlap on the .d4 column.

Source order independence

With the new CSS, left-right position no longer depends on where in the HTML the elements have been written. Just give the element the span class it needs, plus the *-overlap class, and it will appear there. This does not override top-down source order though, only left-right.

For example, in our ‘d’ grid, a .d3-d5 element could come before a .d1-d3 element in the HTML, but appear in the correct order on the page by using .d-overlap:

<article class="d3-d5">
    …
</article>
<article class="d1-d3 d-overlap">
 …
</article>