49 lines
1.2 KiB
SCSS
49 lines
1.2 KiB
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;
|
|
} |