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

RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
	+RV-Block__Modifier--name('autoWidth')
		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--name('fixedSize')
		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-width=300px)
	+RV-Block__Modifier--name('masonry')
		display unquote(block)
		column-count auto
		column-width item-width
		
		+RV-Element('Item')
			margin-bottom: var(--inner-spacing);
			
			*{
				margin-bottom: unset;
			}

RV-FlexGrid__Item()
	+RV-Element--name('Item')
		pass


RV-FlexGrid()
	display grid

+RV-Block('RV-FlexGrid')
	RV-CSSParameter({
		item-height: 300px,
		item-width: 300px
	})
	RV-FlexGrid()
	
	+RV-Element()
		RV-FlexGrid__Item()

	+RV-Block__Modifier()
		RV-FlexGrid--autoWidth(item-height, item-width)
		
	+RV-Block__Modifier()
		RV-FlexGrid--fixedSize(item-height, item-width)
		
	+RV-Block__Modifier()
		RV-FlexGrid--masonry(item-width)