I am using a main layout of two grid-spans, that serve as a content and the right panel. Then, in content, I have three grid-spans, that are equal columns. Like this: 1. Parent span: 6 and 6 2. Child span of first column: 4 and 4 and 4
What happens, is that when I use grid-span for the content 3 columns, then they have paddings, all three of them, and the padding of the last column visually adds to the padding of the parent container to create a double gutter.
However, when I use float-span, then we the last of the three content columns does not have a padding, and looks visually longer than the first two columns.
Is there a way to make all 3 child columns same size, AND have the third column without padding, without having to hack into singularitygs with css overrides?
That's how Singularity's fixed gutters work in the first place.
To apply backgrounds to columns without including their padding, use subcontainers.
See this demo: http://sassmeister.com/gist/b2d957171427022de7c7
PS Don't nest your Sass code. Use semantic classes to address elements directly. Use two-level depth to position children within parents, e. g.:
.parent
.child-1
+grid-span(1,1)
.child-1
+grid-span(1,2)
Never use three-level depth, unless you've got a really-really good reason.