Calc dimension including margin/padding

components/01_Layouts/flexGrid/_flexGrid.styl

@@ -12,36 +12,43 @@ RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
 		grid-template-columns repeat(auto-fill, item-width)
 		justify-content space-between
 
-RV-FlexGrid--masonry(item-width=300px)
+RV-FlexGrid--masonry(item-height=300px,item-width=300px)
 	+RV-Block__Modifier--name('masonry')
 		display unquote(block)
 		column-count auto
 		column-width item-width
 		
 		+RV-Element('Item')
+			display inline-block
+			height unset
 			margin-bottom: var(--inner-spacing);
-			
-			*{
-				margin-bottom: unset;
+			& > *  {
+				height auto
 			}
 
-RV-FlexGrid__Item()
+RV-FlexGrid__Item(item-height, item-width)
 	+RV-Element--name('Item')
-		pass
+		height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
+		& > *  {
+			height 100%
+			width 100%
+		}
 
-
-RV-FlexGrid()
+RV-FlexGrid(item-height, item-width)
 	display grid
+	
+	grid-template-columns: repeat(auto-fill, var(--item-width));
+	
 
 +RV-Block('RV-FlexGrid')
 	RV-CSSParameter({
 		item-height: 300px,
 		item-width: 300px
 	})
-	RV-FlexGrid()
+	RV-FlexGrid(item-height, item-width)
 	
 	+RV-Element()
-		RV-FlexGrid__Item()
+		RV-FlexGrid__Item(item-height, item-width)
 
 	+RV-Block__Modifier()
 		RV-FlexGrid--autoWidth(item-height, item-width)
@@ -50,4 +57,4 @@ RV-FlexGrid()
 		RV-FlexGrid--fixedSize(item-height, item-width)
 		
 	+RV-Block__Modifier()
-		RV-FlexGrid--masonry(item-width)
+		RV-FlexGrid--masonry(item-height,item-width)