Clarifying how to override default grid, creating grids within grids

[minneapolisdan]

After much confusion, I think I learned how to do a "grid within a grid" in singularity, and wanted to confirm with someone.

1. I've always set a global grid on a site, related to breakpoints, such as:
   @include add-grid(12 at $tablet);
@include add-grid(16 at $desktop);
2. So with 16 columns available at desktop width, I could make a simple 2-column grid, such as:
   .sidebar-first { @include grid-span(4, 1); } .main-content {@include grid-span(12, 5); }
3. Now what if I want a 3-col grid inside that main-content area? I thought it could be as simple as:

.list { @include float-span(4); }

but it was treating the 'grid-space' as 16 columns (the global value) instead of the current grid it was inside (12 column main-content).

1. I tried to overwrite this by including:

.main-content {@include grid-span(12, 5); @include add-grid(12); }

but it didn't work, it was still 16 columns, meaning my 3 .list items didn't fill the area nicely.

1. Then I thought, maybe it was because I declared my global grid with a breakpoint (@include add-grid(16 at $desktop);)

So I tried to overwrite that for my grid-within-a-grid:

.main-content {@include grid-span(12, 5); @include add-grid(12 at $desktop); }

1. Boom, it worked! I suddenly had a 12 column grid inside my main-content, and could easily create a 3 column list inside it.

Hope that makes sense. I just never knew that was something I had to do. I'd be happy to contribute to some documentation if need be. If I'm going about this the wrong way, could someone let me know?

[mnich]

To override, I use mixin layout
section "Group Context Overrides"
https://github.com/at-import/Singularity/wiki/spanning-the-grid