nesting columns using grid-span vs. layout properly and background-grid

Question

ahoy all,

i have been studying the Singularity grid framework and so far i really like its simplicity and concepts/mental models. however, like others i am still a bit confused about how to do nested grids properly in Singularity. after looking over similar questions:

• Still confused with nested grids
• Subgrid with floating method and padding
• Having to re-declare global context?

i came up with the following examples to created nested grids: one using only grid-span and another using layout and grid-span:

• Singularity nested columns using grid-span
• Singularity nested columns using layout+grid-span

as you can see they achieve the same end result, though using the layout method feels better. with that in mind, my question is 2 fold:

1. is there a "best/recommended practice" for creating nested grids with Singularity?

2. why are the grids drawn bybackground-grid on the same elements different when using grid-span vs. layout? it seems as if the nested columns are being created differently and thus have different "inner" columns? the background grids using layout seem more correct, though even there some of the elements look incorrect (e.g. the "first" element has 10 columns inside it drawn by background-grid while it only spans 8 columns of the parent container, and the "a" & "b" elements have 6 columns drawn inside it by background-grid though they only span 3 columns of the parent container).

   i apologize in advance if i am misunderstanding some simple idea of Singularity. in fact, it is probably likely ;)

   thanks in advance for any help.

peace

Answer 1

layout is for when you are nesting lots of things. You just specify your context once and then you can nest sub-elements within that nested context.

grid-span offers one-time context assignment. It’s for nesting an individual element.

If you need to use background-grid within a nested context, you should use layout and it should identify the correct context. background-grid is prone to rounding errors, especially in webkit based browsers and the guides may be slightly off.