Since our grid styles are fluid by default, the ability to embed a grid within another grid’s columns has always been present with the Gridset CSS (and Sass functions), but the overlay script just couldn’t recognize this difference. The grids for a particular screen size would be dumbly rendered on top of the content. But now, with the application of a simple class, you can tell the overlay script exactly where each grid should go.
The result may just change how you think about fluid layouts. View a simple demo here.
Applying grids in your layout
Once you’ve installed the Gridset overlay script, applying a grid to an element is simple. By adding the class of
*-showgrid to an element, you can define which grid shows within which element when the overlay is turned on.
<section id="related" class="d-showgrid t-showgrid"> <h3>Related cat stories</h3> <article> <img class="d1 t1 m-all" src="kitten.jpg" /> <div class="d2 t2 m-all"> <h1>Cats meow the damndest things</h1> <p>Morbi interdum mollis sapien. Sed ac risus.</p> </div> </article> …
Give it a try right now. You can read more about the overlay and Gridset CSS classes in the documentation, and as always, if you have any trouble with this new functionality, please email firstname.lastname@example.org.