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

RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
	+RV-Block--modifier()
		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)

RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
	+RV-Block--modifier()
		grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
		grid-auto-rows minmax(item-height, 1fr)
		grid-template-columns repeat(auto-fill, item-width)
		justify-content space-between

RV-FlexGrid--masonry__Item()
	+RV-Element()
		display inline-block
		width 100%
		height unset
		margin-bottom: var(--inner-spacing);
		& > *  {
			height auto
		}
		
RV-FlexGrid--masonry(item-height=300px,item-width=300px)
	+RV-Block--modifier()
		display unquote(block)
		column-count auto
		column-width item-width
		
		RV-FlexGrid--masonry__Item()
		

RV-FlexGrid--verticalMasonry__Item()
	+RV-Element()
		display inline-block
		height unset
		margin-bottom: var(--inner-spacing);
		& > *  {
			height auto
		}
		
RV-FlexGrid--verticalMasonry(item-height=300px,item-width=300px)
	+RV-Block--modifier()
		display unquote(block)
		column-count auto
		column-width item-width
		
		RV-FlexGrid--verticalMasonry__Item()
			
RV-FlexGrid--horizontalMasonry__Item()
	+RV-Element()
		height calc_height(item-height)
		width calc_width(max-content)

RV-FlexGrid--horizontalMasonry(item-height=300px,item-width=300px)
	+RV-Block--modifier()
		display flex
		flex-direction row
		flex-wrap wrap
		
		RV-FlexGrid--horizontalMasonry__Item()
		

RV-FlexGrid__Item(item-height, item-width)
	+RV-Element()
		height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
		& > *  {
			height 100%
			width 100%
		}

RV-FlexGrid(item-height, item-width)
	+RV-Block()
		RV-CSSParameter({
			item-height: item-height,
			item-width: item-width
		})
		
		display grid
		grid-template-columns: repeat(auto-fill, var(--item-width));
		
		RV-FlexGrid__Item(--item-height, --item-width)
		
		RV-FlexGrid--autoWidth(--item-height, --item-width)
		RV-FlexGrid--fixedSize(--item-height, --item-width)
		RV-FlexGrid--masonry(--item-height, --item-width)
		RV-FlexGrid--verticalMasonry(--item-height, --item-width)
		RV-FlexGrid--horizontalMasonry(--item-height, --item-width)	

RV-FlexGrid(300px, 300px)