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.
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
<article class="d1-d4"> … </article> <article class="d4-d6 d-overlap"> … </article>
These two articles would now overlap on the .d4 column.
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
element could come before a
.d1-d3 element in the
HTML, but appear in the correct order on the page by using
<article class="d3-d5"> … </article> <article class="d1-d3 d-overlap"> … </article>