Susy сетки: как гнездо нечетное число столбцов в сетке

Question

Просто интересно, что это лучший способ пойти об этом ...

Я использую Susy grid (Sass/Compass, Susy версия 1).

Мои столбиковые столбцы = 12. Однако внутри двенадцати я хотел бы разделить это на 5 столбцов одинаковой ширины.

Есть ли простой способ сделать это, используя сетку Susy? Я не знаю, как вложить нечетное число столбцов в четное число столбцов.

Answer 1

Вы можете лгать Сьюзи о своем контексте, и он разделит пространство на множество столбцов, как вы говорите, доступно - span-columns(1, 5) разделит пространство на 5 единиц. Единственная проблема заключается в том, что ваши желоба будут различаться по-разному в сетке с 12 колонками и в 5 столбчатой ​​сетке, потому что они вычисляются относительно размера столбца.

Простейший способ получить разные решетки в одном контейнере и сохранить равные желоба через решетки, заключается в перемещении желобов внутрь. У Susy 1 нет возможности автоматизировать это, но Susy 2 делает. Вам нужен параметр inside-static.

В Susy 1 вам нужно установить свои желоба в 0 (с любыми единицами, которые вы используете), убедитесь, что вы используете коробку по размеру коробки, а затем добавьте желоба вручную.

@mixin static-gutters($width) { 
    padding-left: $width/2; 
    padding-right: $width/2; 
} 

.item { 
    @include span-columns(1, 5); 
    @include static-gutters(1em); 
}