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

Question

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

Моя проблема связана с вложенными сетками. Скажем, у меня есть простая сетка 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'); 
     } 
    } 
} 

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

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

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'); 
     } 
    } 
    } 
}