Подсетка с плавающим методом и заполнением

Вы должны понимать две вещи:

1. Singularity применяет относительную ширину к столбцам.
2. Все, что он делает, это генерирует CSS, совершенно не зная о вашей HTML-структуре.

Итак, если вы примените диапазон с плавающей запятой к классу, он получит, например, width: 33%. Каждый элемент с этим классом будет иметь width: 33%, независимо от его вложенности. Это означает, что вы не можете создавать вложенные сетки с одним уровнем несемантических классов. Вам понадобится два или более уровней:

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

Это приводит к раздуванию CSS. Вот почему несемантический подход никогда не должен использоваться, когда ваша среда позволяет вам использовать семантический подход (и Sass позволяет вам сделать это без особых усилий):

Структура:

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

  #bar.container
    .column Baz
    .column Quux

Стили:

$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)  

Демо: http://sassmeister.com/gist/7360259

Также обратите внимание на две вещи:

• Вам не нужно охватывать контейнер первого уровня, он уже имеет ширину 100%.
• Вы должны быть очень осторожны с фиксированными полями во вложенных сетках.