Flexbox & Grid
Utilidades para especificar las columnas en un diseño de cuadrícula.
| Clase | Estilos |
|---|---|
grid-cols-<number> | grid-template-columns: repeat(<number>, minmax(0, 1fr)); |
grid-cols-none | grid-template-columns: none; |
grid-cols-subgrid | grid-template-columns: subgrid; |
grid-cols-[<value>] | grid-template-columns: <value>; |
grid-cols-(<custom-property>) | grid-template-columns: var(<custom-property>); |
Usa utilidades grid-cols-<number> como grid-cols-2 y grid-cols-4 para crear cuadrículas con n columnas de igual tamaño:
<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>Usa la utilidad grid-cols-subgrid para adoptar las pistas de columna definidas por el padre del elemento:
<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="col-span-3 grid grid-cols-subgrid gap-4"> <div class="col-start-2">06</div> </div></div>Usa la sintaxis grid-cols-[<value>] para establecer el columns basado en un valor completamente personalizado:
<div class="grid-cols-[200px_minmax(900px,_1fr)_100px] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis grid-cols-(<custom-property>) :
<div class="grid-cols-(--my-grid-cols) ..."> <!-- ... --></div>Esto es solo un atajo para grid-cols-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad grid-template-columns con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<div class="grid grid-cols-1 md:grid-cols-6 ..."> <!-- ... --></div>Aprende más sobre el uso de variantes en la documentación de variantes.