Subgrid с плавающим методом и дополнением

Question

Как получить вложенную сетку с Singularity? Я создал простую сетку и нуждаюсь в вложенных сетках с плавающим методом.

Мой пример: http://sassmeister.com/gist/7326030

Answer 1

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

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% ширины.
• Вы должны быть очень осторожны с фиксированными полями в вложенных сетках.