Все еще путают с вложенными сетками

Question

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

Моя проблема с вложенными сетками. Допустим, у меня есть простая сетка из 12 столбцов

$grids: add-grid(12 at $break2);

И мой макет использует основную область содержимого, которая расширяется на 9 из этих 12 столбцов:

@include breakpoint($break2) {
    @include grid-span(9, 3);
    border: 1px solid red;
}

Внутри этой области содержимого мне нужно создать раздел, который разделен на три столбца, что означает, что каждая статья внутри будет охватывать 3 столбца родительского контейнера (который составляет 9 из 9 столбцов).

Я пробовал это с помощью следующего кода, но не могу заставить его работать.

.highlights{
    overflow: hidden;
    border: 1px solid black;

    article{

        @include float-span(3);

        &:nth-child(3n){
            @include float-span(1, 'last');
        }
    }
}

Моя цель состояла в том, чтобы иметь простое объявление, где я мог бы иметь общее объявление статьи для каждой статьи, передавая правило для последней статьи в каждой строке, как я делал выше.

Может быть, моя путаница, потому что я так привык к текущей системе сетки, которую я использую, вы можете помочь с этим. Какой лучший и самый практичный способ вложить сетки, чтобы они могли совмещаться со своими родительскими элементами?

Answer 1

Итак, проблема, с которой вы столкнулись, заключается в том, что вы не изменили контекст сетки и все еще используете глобальный контекст сетки из 12 столбцов. Вам нужно изменить свой сеточный контекст на 9, так как теперь вы находитесь внутри сетки с 9 столбцами. Следующее должно исправить вашу проблему:

.highlights{
  overflow: hidden;
  border: 1px solid black;

  article{
    @include layout(9) {
      @include float-span(3);

      &:nth-child(3n){
        @include float-span(1, 'last');
      }
    }
  }
}