Как я могу вкладывать сетку сингулярности в другую?
Можно ли вкладывать сетки в Singularity?
Вот моя установка:
$break: 500px;
$break1: 700px;
$break2: 900px;
$break3: 1200px;
$grids: 3;
$grids: add-grid(6 at $break);
$grids: add-grid(12 at $break1);
$grids: add-grid(2 8 2 at $break2);
$grids: add-grid(3 6 1 1 1 at $break3);
$gutters: 1/3;
$gutters: add-gutter(.25 at 900px);
$output: 'isolation';
Текущий контекст, о котором я спрашиваю, находится внутри $break3
,
Я хотел бы иметь следующую структуру сетки.
Я понимаю, что нижеприведенное неверно, это просто демонстрация структуры сетки, которую я хотел бы иметь. Я пытался использовать функции для вывода правильной ширины, но мне не повезло, но это, вероятно, потому, что я все делал неправильно.
HTML структура:
<div class="container">
<div class="1">
<div class="1-a"></div>
<div class="1-b"></div>
<div class="1-c"></div>
<div class="1-d"></div>
</div>
<div class="2"></div>
</div>
SCSS
- Div.1:
@include grid-span(4, 2);
- div.1-a вложен в div1 и охватывает первый столбец 4
- div.1-b вложены в div1 и охватывают последние 3 столбца по 4
- div.1-c вложены в div1 и охватывают последние 3 столбца из 4, расположенных ниже 1-b
- div.1-d вложены в div1 и охватывают последние 3 столбца из 4, расположенных ниже 1-c
- Div.2:
@include grid-span(1, 1);
1 ответ
Решение
Конечно вы можете! $grids
имеет дело только с основным контекстом сетки, но если вы хотите изменить контекст сетки, вы можете либо переопределить контекст сетки через интервал сетки, либо вы можете сделать это с помощью компоновки компоновки.
Также взгляните на этот связанный вопрос и ответ.