Componentes CSS Grids
Rejilla con capacidad de respuesta
Rejilla responsive con ancho de columna mínimo.
<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>Recuento de columnas fijas
Rejilla adaptable con recuento de columnas fijo.
<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>
