each gridIndex in [0, 1, 2]
    div.grid
      each itemIndex in [0, 1, 2, 3, 4, 5]
        div.grid__item
View Compiled
body {
    padding: 2rem;
    background: #f3f3f3;
}

.grid {
    $self: &;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
    
    // Add flow between grids 
    & + #{ $self } {
        margin-top: 2rem;
    }
    
    &__item {
        padding: 3rem;
        background: lightgray;
        color: white;
        border-radius: 0.5rem;
        
        // For each direct .grid sibling, make this item rebeccapurple
        #{ $self } + #{ $self } & {
            background: rebeccapurple;
        }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.