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

RV-FlexGrid__Container()
	display grid

RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
	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__Container--fixedSize(item-height=300px, item-width=300px)
	RV-FlexGrid__Container--autoWidth(item-height, item-width)
	grid-template-columns repeat(auto-fill, item-width)
	justify-content space-between

RV-FlexGrid__Container--masonry(item-width=300px)
	display unquote(block)
	column-count auto
	column-width item-width
	
	RV-Utils__Hook--throw('masonry_grid', @(gap){
			*{
				margin-bottom: gap;
			}
		}
	)


RV-FlexGrid--shorthands(prefix='&')
	{prefix}__Container
		&--autoWidth
			RV-FlexGrid__Container--autoWidth()

		&--fixedSize
			RV-FlexGrid__Container--fixedSize()

		&--masonry
			RV-FlexGrid__Container--masonry()

RV-FlexGrid(prefix='&')
	{prefix}__Container
		RV-FlexGrid__Container()

	{prefix}__Item
		RV-Alignment()

.RV-FlexGrid
	RV-FlexGrid()
	RV-FlexGrid--shorthands()