Nesting elements and grids

Nesting in Gridset can be a bit confusing. To clear this up, first decide what you are nesting: are you nesting an element on grid within another element on grid? Or are you nesting a grid within a grid? We’ll cover both in this post.

Nesting an element on grid within another element on the same grid

Nesting percentages in CSS can be tricky, involving maths and calculators to figure out the compounding percentages. You see, one column width of a four-column grid is 25%, but if that one column is within a two-column element, it would be 50%. Context changes the width and margin measurements.

Luckily Gridset makes this all very easy by adjusting the measurement calculations for you. In order to nest an element on grid within another on grid, you merely need to continue using the span class you intend:

<section class="d2-d4">
    <article class="d3">
    …
    </article>
</section>

The Gridset CSS will handle the different percentages for you.

Nesting grids

It’s also quite easy to nest a grid within another grid. As every grid generated by Gridset is set in percentages, you can use a grid anywhere you like to divide up the available space. This is achieved by using the classes for the grid you want to use wherever you want to use it:

<section class="da2-da4">
    <article class="db1-db2">
    …
    </article>
    <article class="db3-db4">
    …
    </article>
</section>

There is only one trick: as of right now, you cannot nest a grid within itself. Doing so will result in elements on grid being treated as on the same grid, as in the first example on this page (nesting an element on grid within another element on the same grid).

To nest the same grid within itself, you need to duplicate the grid and use two different prefixes.