POC

components/01_Layouts/flexGrid/flexGrid.hbs

@@ -1,4 +1,4 @@
-<div class="RV-FlexGrid__Container">
+<div class="RV-FlexGrid__Container RV-FlexGrid__Container--autoWidth">
 	<div class="red RV-FlexGrid__Item">Heres</div>
 	<div class="green RV-FlexGrid__Item">some</div>
 	<div class="red RV-FlexGrid__Item">totally</div>
@@ -15,7 +15,24 @@
 
 <br><br>
 
-<div class="RV-FlexGrid__Container RV-FlexGrid__Container--sameHeight">
+<div class="RV-FlexGrid__Container RV-FlexGrid__Container--fixedSize">
+	<div class="red RV-FlexGrid__Item">Heres</div>
+	<div class="green RV-FlexGrid__Item">some</div>
+	<div class="red RV-FlexGrid__Item">totally</div>
+	<div class="green RV-FlexGrid__Item">awesome</div>
+	<div class="red RV-FlexGrid__Item">content</div>
+	<div class="green RV-FlexGrid__Item">for</div>
+	<div class="red RV-FlexGrid__Item">you</div>
+	<div class="green RV-FlexGrid__Item">only</div>
+	<div class="red RV-FlexGrid__Item">for</div>
+	<div class="green RV-FlexGrid__Item">you</div>
+	<div class="red RV-FlexGrid__Item">to</div>
+	<div class="green RV-FlexGrid__Item">enjoy</div>
+</div>
+
+<br><br>
+
+<div class="RV-FlexGrid__Container RV-FlexGrid__Container--masonry RV-Spacing__Inner--small">
 	<div class="red RV-FlexGrid__Item">Heres</div>
 	<div class="green RV-FlexGrid__Item">some</div>
 	<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>

components/02_Styles/spacing/_spacing.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @mixin RV-Spacing__Outer--small {
     margin: $-spacing-small;
 }
@@ -10,26 +12,56 @@
     margin: $-spacing-large;
 }
 
+@mixin _flexrow_breakpoint_min_width($-gap) {
 
-@mixin RV-Spacing__Inner--small($-container-suffix: '__Container')  {
+    @include RV-Utils__Hook--catch {
+        $-breakpoint: get-hook-value('breakPoint');
+
+        @include RV-Utils__ElementAmount using($-index) {
+            min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap}));
+
+            * {
+                min-width: initial;
+            }
+        }
+    }
+}
+
+@mixin _flexgrid_masonry_column_gap($-gap) {
+
+    @include RV-Utils__Hook--catch {
+        * {
+            margin: $-gap/2 0;
+        }
+    }
+}
+
+
+@mixin RV-Spacing__Inner--small() {
     padding: $-spacing-small;
-	&#{$-container-suffix} {
     gap: $-spacing-small;
-	}
+    column-gap: $-spacing-small;
+
+    @include _flexrow_breakpoint_min_width($-spacing-small);
+    @include _flexgrid_masonry_column_gap($-spacing-small);
 }
 
-@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container')  {
+@mixin RV-Spacing__Inner--medium() {
     padding: $-spacing-medium;
-    &#{$-container-suffix} {
     gap: $-spacing-medium;
-	}
+    column-gap: $-spacing-medium;
+
+    @include _flexrow_breakpoint_min_width($-spacing-medium);
+    @include _flexgrid_masonry_column_gap($-spacing-medium);
 }
 
-@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') {
+@mixin RV-Spacing__Inner--large() {
     padding: $-spacing-large;
-    &#{$-container-suffix} {
     gap: $-spacing-large;
-	}
+    column-gap: $-spacing-large;
+
+    @include _flexrow_breakpoint_min_width($-spacing-large);
+    @include _flexgrid_masonry_column_gap($-spacing-medium);
 }
 
 @mixin RV-Spacing {
@@ -49,15 +81,15 @@
 
     &__Inner {
         &--small {
-            @include RV-Spacing__Inner--small('');
+            @include RV-Spacing__Inner--small;
         }
 
         &--medium {
-            @include RV-Spacing__Inner--medium('');
+            @include RV-Spacing__Inner--medium;
         }
 
         &--large {
-            @include RV-Spacing__Inner--large('');
+            @include RV-Spacing__Inner--large;
         }
     }
 }

components/05_Components/menu/_menu.scss

@@ -7,22 +7,18 @@
 
     &--horizontal &__List {
         @include RV-FlexRow__Container--horizontal;
-        @include RV-FlexRow__Container--breakPoint;
+        @include RV-FlexRow__Container--breakPoint(400px);
-    }
-
-    &--spaced &__List {
-        gap: $-spacing-medium;
     }
 
     &__List {
         @include RV-FlexRow__Container($-prefix: '.RV-Menu');
         @include RV-ElementList;
-        padding: $-spacing-small;
     }
 
     &__Item {
         @include RV-FlexRow__Item;
         @include RV-FlexRow__Item--shorthands;
+        width: 100px;
 
         .RV-Link {
             padding: $-spacing-small;

components/05_Components/menu/menu.hbs

@@ -20,7 +20,7 @@
 
 <br><br>
 
-<div class="RV-Menu RV-Menu--horizontal RV-Menu--spaced">
+<div class="RV-Menu RV-Menu--horizontal RV-Spacing__Inner--small">
 	<ul class="RV-Menu__List">
 		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
 		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
@@ -31,7 +31,7 @@
 
 <br><br>
 
-<div class="RV-Menu RV-Menu--vertical RV-Menu--spaced">
+<div class="RV-Menu RV-Menu--vertical">
 	<ul class="RV-Menu__List">
 		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
 		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>

public/pink.css

@@ -0,0 +1,3 @@
+.pink {
+  background-color: #ffc0cb;
+}

public/playground.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../components/playground.styl"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;AA8BA;EAZI,SAAS,IAAT;EACA,kBAAkB,QAAlB;EACA,QAAQ,eAAR;EACA,SAAS,OAAT;;AAaJ;EARC,SAAS,OAAT;EACG,OAAO,IAAP;;AAWJ;EApBI,SAAS,IAAT;EACA,kBAAkB,QAAlB;EACA,QAAQ,eAAR;EACA,SAAS,OAAT;EAKH,SAAS,OAAT;EACG,OAAO,IAAP;;AATA,SAAS,IAAT;AACA,kBAAkB,QAAlB;AACA,QAAQ,eAAR;AACA,SAAS,OAAT","file":"playground.css"}