scss-library/components/01_Layouts/flexGrid/_flexGrid.scss

@mixin RV-FlexGrid__Container {
    display: grid;
}

@mixin RV-FlexGrid__Container--autoWidth($-item-height: 300px, $-item-min-width: 300px) {
    grid-template-columns: repeat(auto-fill, minmax($-item-min-width, 1fr));
    grid-template-rows: repeat(auto-fill, minmax($-item-height, 1fr));
    grid-auto-rows: minmax($-item-height, 1fr);
}

@mixin RV-FlexGrid__Container--fixedSize($-item-height: 300px, $-item-width: 300px) {
    @include RV-FlexGrid__Container--autoWidth($-item-height, $-item-width);
    grid-template-columns: repeat(auto-fill, $-item-width);
    justify-content: space-between;
}

@mixin RV-FlexGrid__Container--masonry($-item-width: 300px) {
    display: block;
    column-count: auto;
    column-width: $-item-width;

    @include RV-Utils__Hook--throw(());
}

@mixin RV-FlexGrid($-prefix: '&') {
    #{$-prefix}__Container {
        @include RV-FlexGrid__Container;

        &--autoWidth {
            @include RV-FlexGrid__Container--autoWidth;
        }

        &--fixedSize {
            @include RV-FlexGrid__Container--fixedSize;
        }

        &--masonry {
            @include RV-FlexGrid__Container--masonry;
        }
    }

    #{$-prefix}__Item {
        @include RV-Alignment;
    }
}

.RV-FlexGrid {
    @include RV-FlexGrid;
}