Molecular mixins

components/01_Layouts/flexGrid/_flexGrid.scss

@@ -1,9 +1,13 @@
-@mixin RV-FlexGrid($item_width: 300px, $item_height: 300px) {
+@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
+	grid-template-rows: repeat(auto-fill, $-item_height);
+	grid-auto-rows: $-item_height;
+}
+
+@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
 	&__Container {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax($item_width, 1fr));
-		grid-template-rows: repeat(auto-fill, $item_height);
-		grid-auto-rows: $item_height;
+		@include RV-FlexGrid__Container($-item_width, $-item_height) :
 	}
 
 	&__Item {

components/01_Layouts/flexRow/_flexRow.scss

@@ -1,23 +1,55 @@
+@mixin RV-FlexRow__Container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+
+	&--multiRow {
+		flex-wrap: wrap;
+	}
+}
+
+@mixin RV-FlexRow__Item {
+	@include RV-Alignment;
+
+	&,&--normal {
+		flex-grow: 3;
+		flex-shrink: 3;
+	}
+
+	&--narrower {
+		flex-grow: 1;
+		flex-shrink: 5;
+	}
+
+	&--narrow {
+		flex-grow: 2;
+		flex-shrink: 4;
+	}
+
+	&--wide {
+		flex-grow: 4;
+		flex-shrink: 2;
+	}
+
+	&--wider {
+		flex-grow: 5;
+		flex-shrink: 1;
+	}
+
+	&--fixedSize {
+		flex-grow: 0;
+		flex-shrink: 0;
+		width: min-content;
+	}
+}
+
 @mixin RV-FlexRow {
 	&__Container {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-around;
-
-		&--wrap {
-			flex-wrap: wrap;
-		}
+		@include RV-FlexRow__Container;
 	}
 
 	&__Item {
-		width: 100%;
-		@include RV-Alignment;
-
-		&--fixedSize {
-			flex: 0 0;
-			width: min-content;
-		}
-	
+		@include RV-FlexRow__Item;
 	}
 }