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

49 lines
1.2 KiB
SCSS
Raw Normal View History

@mixin RV-FlexGrid__Container {
2020-12-27 16:00:24 +01:00
display: grid;
2020-08-23 19:20:11 +02:00
}
@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: '&') {
2020-12-27 16:00:24 +01:00
#{$-prefix}__Container {
@include RV-FlexGrid__Container;
&--autoWidth {
@include RV-FlexGrid__Container--autoWidth;
}
&--fixedSize {
@include RV-FlexGrid__Container--fixedSize;
}
&--masonry {
@include RV-FlexGrid__Container--masonry;
}
2020-12-27 16:00:24 +01:00
}
2020-08-21 16:50:22 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}__Item {
@include RV-Alignment;
}
2020-08-21 17:20:29 +02:00
}
2020-12-27 16:00:24 +01:00
.RV-FlexGrid {
@include RV-FlexGrid;
}