CODEWITHSUNDEEP
layoutsasssingularitygs
Alexei Rayu
Alexei Rayu

Reputation: 446

Singularitygs layout in layout padding

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?

enter image description here

Upvotes: 0

Views: 111

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

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.

Upvotes: 1

Related Questions