layoutsasssingularitygs

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


Solution

  • 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.