Grids Anywhere

Posted on by Nathan

You may have noticed the Gridset overlay has been changing. Beyond aesthetic iterations, we have also implemented a new engine for displaying grids on your site that allows you to place a grid overlay on any element you like. This is the beginning of a very exciting (excuse our enthusiasm) round of improvements to the overlay, the underpinning abilities of the app, and how our users can build responsive layouts.

Cat blog

Click image to view full size. Please pardon the cats via placekitten.com

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.

Example Code

<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 support@gridsetapp.com.