[CSS grid gallery with fallback] #css #css-grid #scss

css-grid-gallery-with-fallback.scss

.grid-gallery {
    padding: 0.5rem;
}

.grid-gallery-item {
    padding: 0;
    margin: 0.5rem;
    max-width: 200px;
    display: inline-block;
}


@supports (display-area: auto) {
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, auto));
        grid-auto-rows: 200px;
        grid-gap: 1rem;
    }
    
    .grid-gallery-item {
        margin: 0;
        max-width: none;
        
        &:first-child {
            grid-row: span 2;
            grid-column: span 2;
        }
        
        &:nth-child(5) {
            grid-row: span 2;
        }
        
        &:nth-child(8) {
            grid-column: span 2;
        }
    }
}