W końcu znalazłem trochę czasu na przetestowanie osobliwości i powróciłem do problemu, który miałem wcześniej, ponieważ nie mogę znaleźć oczywistego rozwiązania.

Moim problemem są zagnieżdżone siatki. Powiedzmy, że mam prostą siatkę 12 kolumn

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

A mój układ wykorzystuje główny obszar zawartości, który rozciąga się na 9 z tych 12 kolumn:

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

Wewnątrz tego obszaru treści muszę utworzyć sekcję, która jest podzielona na trzy kolumny, co oznacza, że ​​każdy artykuł wewnątrz będzie obejmował 3 kolumny kontenera nadrzędnego (czyli 9 z 9 kolumn).

Próbowałem tego z następującym kodem, ale nie mogę go uruchomić.

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

    article{

        @include float-span(3);

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

Moim celem było uzyskanie prostej deklaracji, w której mogłem mieć ogólną deklarację artykułu dla każdego artykułu, przekazując regułę dla ostatniego artykułu w każdym wierszu, tak jak to zrobiłem powyżej.

Może moje zamieszanie wynika z faktu, że jestem tak przyzwyczajony do obecnego systemu gridowego, czy możesz pomóc w tym. Jaki jest najlepszy i najbardziej praktyczny sposób zagnieżdżania siatek, aby można je było dopasować do elementów macierzystych?