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:
i came up with the following examples to created nested grids: one using only grid-span
and another using layout
and 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:
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
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.