CSS Grids Components

<div class="display:grid grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) gap:24px">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

<!--
stylify-components
	grid: `
		display:grid gap:24px
		&--250 {
			grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
		}
	`
/stylify-components
-->
<div class="grid grid--250">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

<div class="
	display:grid gap:24px
	grid-template-columns:repeat(2,minmax(0,1fr))
	sm:grid-template-columns:repeat(4,minmax(0,1fr))
	md:grid-template-columns:repeat(5,minmax(0,1fr))
">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>

<!--
stylify-components
	'responsive-grid': `
		display:grid gap:24px
		sm:grid-template-columns:repeat(2,minmax(0,1fr))
		md:grid-template-columns:repeat(4,minmax(0,1fr))
		lg:grid-template-columns:repeat(5,minmax(0,1fr))
	`
/stylify-components
-->
<div class="responsive-grid">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>