Activa grid
La clase .grid convierte el contenedor en un layout de tipo grid.
Grid
Grid activa el sistema de columnas del framework y permite construir estructuras uniformes, escalables y consistentes en distintos breakpoints.
Qué resuelve grid
La clase .grid es el punto de entrada al sistema de columnas.
Su función es activar display: grid y construir la distribución
horizontal del contenido a partir de variables internas del framework.
Grid no define por sí sola cuántas columnas habrá. Esa responsabilidad se delega
a clases como .cols-2, .cols-3 o sus variantes responsive.
Referencia del sistema
.grid {
display: grid;
grid-template-columns: var(
--grid-template,
repeat(var(--cols, 1), 1fr)
);
gap: var(--gap, var(--space-3));
}Cómo funciona
Usa variables internas
La cantidad de columnas se define a través de --cols o
de una relación más compleja mediante --grid-template.
Controla separación
El espacio entre columnas se resuelve con --gap, normalmente
definido por helpers como .gap-sm, .gap-md o .gap-lg.
Ejemplos de grid
Columna 1
Columna 2
<div class="grid cols-1 md:cols-2 gap-md">
<div>Columna 1</div>
<div>Columna 2</div>
</div>Columna 1
Columna 2
Columna 3
<div class="grid cols-1 md:cols-2 lg:cols-3 gap-md">
<div>Columna 1</div>
<div>Columna 2</div>
<div>Columna 3</div>
</div>Grid y column count
Grid funciona junto con clases que definen cantidad de columnas.
Sin una clase como .cols-2 o .cols-3, el sistema
usará una sola columna por defecto.
.cols-1.cols-2.cols-3.cols-4.cols-5.cols-6
Escalado responsive
El sistema grid crece desde una base móvil. Las columnas se escalan
mediante prefijos como sm:, md:, lg:, xl: y xxl:.
<div class="grid cols-1 sm:cols-2 lg:cols-4 gap-md">
...
</div>- Base sin prefijo = móvil.
- Los prefijos agregan columnas conforme crece el viewport.
- La lógica siempre sigue el enfoque mobile-first.
Relación con proportions
Grid también puede trabajar con relaciones más complejas a través de
--grid-template. En esos casos, en vez de usar solo cantidad de columnas,
se usan clases como .cols-2-1 o .lg:cols-3-1.
<div class="grid cols-1 lg:cols-2-1 gap-md">
...
</div>Qué sí y qué no va en grid
Qué sí debe contener
- Display grid base.
- Grid-template basado en variables internas.
- Integración con
--cols. - Integración con
--grid-template. - Integración con
--gap.
Qué no debe contener
- Containers.
- Helpers flex.
- Spacing direccional.
- Tipografía.
- Componentes o estilos visuales del proyecto.
Siguiente paso
Continúa con proportions para entender cómo construir relaciones más complejas entre columnas.