Как я могу вкладывать сетку сингулярности в другую?

Можно ли вкладывать сетки в 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 имеет дело только с основным контекстом сетки, но если вы хотите изменить контекст сетки, вы можете либо переопределить контекст сетки через интервал сетки, либо вы можете сделать это с помощью компоновки компоновки.

Также взгляните на этот связанный вопрос и ответ.

Другие вопросы по тегам