Retícula y utilidades de layout
Sistema de utilidades de layout siguiendo el modelo Tailwind, integrado con los tokens GN. Todas las clases usan el prefijo gn-. Las clases responsivas usan la sintaxis {breakpoint}:gn-{clase}.
Breakpoints
| Prefijo | Mínimo | Descripción |
|---|---|---|
| — (sin prefijo) | 0 px | Mobile-first. Se aplica siempre. |
| sm: | 640 px | Pantallas pequeñas (teléfonos apaisados). |
| md: | 768 px | Tablets. Alineado con el breakpoint del gn-header y gn-footer. |
| lg: | 1024 px | Escritorio estándar. |
---
Container
Centra el contenido y aplica padding lateral coherente con gn-header y gn-footer (1140 px de área útil).
| Clase | Contenido útil | Uso |
|---|---|---|
| .gn-container | 1140 px | Contenido principal. Centrado automático. |
| .gn-container--md | 850 px | Editorial, formularios, texto corrido. |
| .gn-container--fluid | sin límite | Ancho completo con padding lateral. |
| .gn-container--flush | sin límite | Sin padding. Bandas, hero, fondos a borde de pantalla. |
---
Display
| Clase | CSS |
|---|---|
| .gn-grid | display: grid |
| .gn-flex | display: flex |
| .gn-block | display: block |
| .gn-hidden | display: none |
Todas disponibles también como sm:gn-hidden, md:gn-flex, lg:gn-grid…
---
Grid — columnas
Activan CSS Grid y definen el número de columnas iguales. El sistema se basa en 4 columnas máximo; para distribuciones 1/4 + 3/4 o similares se usa gn-grid-4 con gn-col-span-*.
| Clase | CSS generado |
|---|---|
| .gn-grid-3 | grid-template-columns: repeat(3, 1fr) |
| .gn-grid-4 | grid-template-columns: repeat(4, 1fr) |
| .gn-grid-auto-fit | auto-fit, minmax(250px, 1fr) — columnas que se ajustan solas |
| .gn-grid-auto-fill | auto-fill, minmax(250px, 1fr) |
Disponibles con prefijo responsive: sm:gn-grid-3, sm:gn-grid-4, md:gn-grid-3, md:gn-grid-4, lg:gn-grid-3, lg:gn-grid-4.
---
Column / Row span
Controlan cuántas columnas o filas ocupa un hijo dentro del grid.
| Clase | Valor |
|---|---|
| .gn-col-span-{1|2|3|4} | grid-column: span N |
| .gn-col-full | grid-column: 1 / -1 — siempre ancho completo |
| .gn-row-span-{1|2|3|4} | grid-row: span N |
Todos disponibles con prefijos sm:, md: y lg:.
---
Gap
Mapeado directamente a los tokens gn-spacing-*.
| Clase | Token | Valor |
|---|---|---|
| .gn-gap-0 | — | 0 |
| .gn-gap-1 | --gn-spacing-1 | 4 px |
| .gn-gap-2 | --gn-spacing-2 | 8 px |
| .gn-gap-3 | --gn-spacing-3 | 16 px |
| .gn-gap-4 | --gn-spacing-4 | 20 px |
| .gn-gap-5 | --gn-spacing-5 | 24 px |
| .gn-gap-6 | --gn-spacing-6 | 28 px |
| .gn-gap-7 | --gn-spacing-7 | 40 px |
| .gn-gap-8 | --gn-spacing-8 | 64 px |
---
Ejemplos de uso
Layout de página con sidebar
Patrón 1/4 + 3/4 usando gn-grid-4 y gn-col-span-*. En móvil ambas columnas ocupan el ancho completo.
Mostrar HTML
<div class="gn-grid gn-grid-4 gn-gap-5">
<aside class="gn-col-span-1">Lateral</aside>
<main class="gn-col-span-3">Contenido principal</main>
</div>Grid de cards responsivo
Con gn-grid-3 las columnas se reparten en tres partes iguales.
Mostrar HTML
<div class="gn-grid gn-grid-3 gn-gap-3">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>Fila flex con alineación
Mostrar HTML
<div class="gn-flex gn-justify-between gn-items-center">
<span>Título de sección</span>
<div class="gn-flex gn-gap-2">
<button class="gn-button gn-button--md gn-button--secondary">Cancelar</button>
<button class="gn-button gn-button--md gn-button--primary">Guardar</button>
</div>
</div>Sección a ancho completo con container interior
Mostrar HTML
<section class="gn-container--flush">
<div class="gn-container">
<div class="gn-grid gn-grid-4 gn-gap-5">
<div class="gn-col-span-3">Texto del hero (3/4)</div>
<div class="gn-col-span-1">Imagen (1/4)</div>
</div>
</div>
</section>Reordenación con order
Mostrar HTML
<div class="gn-grid gn-grid-4 gn-gap-5">
<div class="gn-col-span-2 gn-order-last">Imagen</div>
<div class="gn-col-span-2 gn-order-first">Texto</div>
</div>