diff --git a/components/01_Layouts/flexGrid/_flexGrid.scss b/components/01_Layouts/flexGrid/_flexGrid.scss index 6b4d0dd..fe4c8e7 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.scss +++ b/components/01_Layouts/flexGrid/_flexGrid.scss @@ -1,10 +1,24 @@ -@mixin RV-FlexGrid { +@mixin RV-FlexGrid--sameHeight($-inline: false) { + @if $-inline { + grid-auto-rows: 1fr; + } + + @if not $-inline { + &__Container { + grid-auto-rows: 1fr; + } + } +} + +@mixin RV-FlexGrid($item_width: 300px, $item_height: 300px) { &__Container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax($item_width, 1fr)); + grid-template-rows: repeat(auto-fill, $item_height); + grid-auto-rows: $item_height; &--sameHeight { - grid-auto-rows: 1fr; + @include RV-FlexGrid--sameHeight(true); } &--spacing { @@ -13,7 +27,7 @@ } &__Item { - @include align-content; + @include RV-AlignContent; } }