Subgrid with floating method and padding

问题

How do I get nested grid with Singularity? I've made a simple grid and need nested grids with floating method.

My sample: http://sassmeister.com/gist/7326030

回答1:

You should understand two things:

Singularity applies relative widths to columns.
All it does is generating CSS, completely unaware of your HTML structure.

So, if you apply a float span to a class, it will get width: 33%, for example. Every element with that class will have width: 33%, regardless of its nesting. This means that you can't create nested grids with a single level of non-semantic classes. You'll need two or more levels:

span1, span2, span3...
grid1-span1, grid1-span2, grid1-span3 ... grid2-span1, grid2-span2, grid2-span3...

This results in bloated CSS. That's why the non-semantic approach should never be used when your environment allows you use the semantic approach (and Sass does lets you do that with little effort):

Structure:

#page
  #foo.container
    .subcontainer
      .column Foo
    .subcontainer
      .column Bar

  #bar.container
    .column Baz
    .column Quux

Styles:

$grids: 12
$gutters: 0.2

#foo
  .subcontainer
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)
  .column
    +layout(6)
      +float-span(3)
      &:nth-child(2n)
        +float-span(3, last)

#bar
  .column
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)

Demo: http://sassmeister.com/gist/7360259

Also note two things:

You don't need to span the first-level container, it's already 100% wide.
You should be very careful with fixed margins in nested grids.

来源：https://stackoverflow.com/questions/19837973/subgrid-with-floating-method-and-padding

标签

singularitygs