GRID BÁSICO
Activar Grid
grid /* Activa display: grid con gap por defecto */
grid-inline /* Activa inline-grid (para grids en línea) */
COLUMNAS BÁSICAS (1-12)
grid-cols-1 /* 1 columna */
grid-cols-2 /* 2 columnas iguales */
grid-cols-3 /* 3 columnas iguales */
grid-cols-4 /* 4 columnas iguales */
grid-cols-5 /* 5 columnas iguales */
grid-cols-6 /* 6 columnas iguales */
grid-cols-7 /* 7 columnas iguales */
grid-cols-8 /* 8 columnas iguales */
grid-cols-9 /* 9 columnas iguales */
grid-cols-10 /* 10 columnas iguales */
grid-cols-11 /* 11 columnas iguales */
grid-cols-12 /* 12 columnas iguales */
Divide el espacio en X columnas iguales
CLASES RESPONSIVE ESPECÍFICAS
Clases Mobile:
mobile-cols-1 → 1 columna en móvil
mobile-cols-2 → 2 columnas en móvil
mobile-cols-3 → 3 columnas en móvil
Clases Tablet:
tablet-cols-1 → 1 columna en tablet
tablet-cols-2 → 2 columnas en tablet
tablet-cols-3 → 3 columnas en tablet
tablet-cols-4 → 4 columnas en tablet
COLUMNAS AUTO-RESPONSIVE
Auto-fit (se adapta al contenido) Se adapta al número de elementos
grid-auto /* Min 280px por columna */
grid-auto-xs /* Min 200px por columna */
grid-auto-s /* Min 240px por columna */
grid-auto-m /* Min 320px por columna */
grid-auto-l /* Min 400px por columna */
grid-auto-xl /* Min 480px por columna */
Auto-fill (llena espacios vacíos) Mantiene columnas aunque estén vacías
grid-fill /* Min 280px, llena espacios */
grid-fill-xs /* Min 200px, llena espacios */
grid-fill-s /* Min 240px, llena espacios */
grid-fill-m /* Min 320px, llena espacios */
grid-fill-l /* Min 400px, llena espacios */
grid-fill-xl /* Min 480px, llena espacios */
LAYOUTS PREDEFINIDOS
Sidebar Layouts
grid-sidebar-left /* Sidebar izquierdo + contenido */
grid-sidebar-right /* Contenido + sidebar derecho */
grid-sidebar-both /* Sidebar izq + contenido + sidebar der */
Layouts Especiales
grid-hero /* Layout completo: header/content/footer */
grid-cards /* Para tarjetas (min 300px) */
grid-cards-s /* Para tarjetas pequeñas (min 250px) */
grid-cards-l /* Para tarjetas grandes (min 350px) */
grid-masonry /* Simula efecto masonry */
grid-dashboard /* Para dashboards (filas 200px) */
COLUMNAS FRACCIONARIAS
Dos Columnas Asimétricas
grid-1-3 /* 1/3 + 2/3 */ 25% | 75%
grid-2-3 /* 2/3 + 1/3 */ 75% | 25%
grid-1-4 /* 1/4 + 3/4 */ 20% | 80%
grid-3-4 /* 3/4 + 1/4 */ 80% | 20%
grid-1-5 /* 1/5 + 4/5 */ 17% | 83%
grid-4-5 /* 4/5 + 1/5 */ 83% | 17%
Tres Columnas Asimétricas
grid-1-2-1 /* 1fr + 2fr + 1fr */ 25% | 50% | 25%
grid-2-1-2 /* 2fr + 1fr + 2fr */ 40% | 20% | 40%
grid-1-1-2 /* 1fr + 1fr + 2fr */ 25% | 25% | 50%
grid-2-1-1 /* 2fr + 1fr + 1fr */ 50% | 25% | 75%
fr = unidad fraccionaria (parte del espacio disponible)
Usar cuando necesitas columnas de diferentes tamaños
FILAS
Filas Básicas
grid-rows-1 /* 1 fila */
grid-rows-2 /* 2 filas iguales */
grid-rows-3 /* 3 filas iguales */
grid-rows-4 /* 4 filas iguales */
grid-rows-5 /* 5 filas iguales */
grid-rows-6 /* 6 filas iguales */
Filas Automáticas
grid-rows-auto /* Filas auto-ajustables (min 100px) */
grid-rows-max /* Filas se ajustan al contenido máximo */
grid-rows-min /* Filas se ajustan al contenido mínimo */
rows-X: Controla el número de filas
rows-auto: Se adaptan al contenido
Usar cuando necesitas controlar la altura
COLUMN & ROW SPAN
Extensión de Columnas
col-span-1 /* Ocupa 1 columna */
col-span-2 /* Ocupa 2 columnas */
col-span-3 /* Ocupa 3 columnas */
col-span-4 /* Ocupa 4 columnas */
col-span-5 /* Ocupa 5 columnas */
col-span-6 /* Ocupa 6 columnas */
col-span-7 /* Ocupa 7 columnas */
col-span-8 /* Ocupa 8 columnas */
col-span-9 /* Ocupa 9 columnas */
col-span-10 /* Ocupa 10 columnas */
col-span-11 /* Ocupa 11 columnas */
col-span-12 /* Ocupa 12 columnas */
col-span-full /* Ocupa todas las columnas */
Extensión de Filas
row-span-1 /* Ocupa 1 fila */
row-span-2 /* Ocupa 2 filas */
row-span-3 /* Ocupa 3 filas */
row-span-4 /* Ocupa 4 filas */
row-span-5 /* Ocupa 5 filas */
row-span-6 /* Ocupa 6 filas */
row-span-full /* Ocupa todas las filas */
Posicionamiento Específico
col-start-1
col-start-2
col-start-3
col-start-4
col-start-5
col-start-6 /* Donde empieza */
col-end-1
col-end-2
col-end-3
col-end-4
col-end-5
col-end-6
col-end-7 /* Donde termina */
span: Hace que un elemento ocupe varias columnas/filas
start/end: Posicionamiento exacto
Usar para elementos destacados, headers, featured content
ALINEACIÓN
Alineación del Grid Completo
/* Horizontal (justify-content) */
justify-start Grid a la izquierda
justify-center Grid centrado
justify-end Grid a la derecha
justify-between Espacio entre elementos
justify-around Espacio alrededor
justify-evenly Espaciado uniforme
/* Vertical (align-content) */
content-start Grid arriba
content-center Grid centrado
content-end Grid abajo
content-between Espacio entre filas
content-around
content-evenly
content-stretch
Alineación de Elementos Dentro del Grid
/* Todos los elementos horizontalmente (justify-items) */
justify-items-start Este elemento a la izquierda
justify-items-center Este elemento centrado
justify-items-end Este elemento a la derecha
justify-items-stretch
/* Todos los elementos verticalmente (align-items) */
items-start
items-center
items-end
items-stretch
items-baseline
/* Ambas direcciones (place-items) */
place-items-start
place-items-center
place-items-end
place-items-stretch
Alineación Individual
/* Elemento individual horizontalmente */
justify-self-start Este elemento a la izquierda
justify-self-center Este elemento al centro
justify-self-end Este elemento a la derecha
justify-self-stretch
/* Elemento individual verticalmente */
self-start Este elemento arriba
self-center Este centrado
self-end Este elemento abajo
self-stretch
justify: Alineación horizontal
align: Alineación vertical
content: Del grid completo
items: De todos los elementos
self: De un elemento individual
GRID AREAS NOMBRADAS
Áreas Predefinidas
area-header /* Para cabeceras */
area-nav /* Para navegación */
area-main /* Para contenido principal */
area-sidebar /* Para sidebar */
area-left-sidebar /* Para sidebar izquierdo */
area-right-sidebar /* Para sidebar derecho */
area-content /* Para contenido */
area-footer /* Para pie de página */
area-aside /* Para contenido lateral */
Permite nombrar áreas del grid semánticamente
Se usa con layouts predefinidos
Usar para layouts complejos con áreas específicas
ROWS COMPARTIDOS
Filas especiales (rows)
row-narrow
row-full
row-grid-auto
row-center
Espaciado vertical (padding)
row-pad-xs
row-pad-s
row-pad-m
row-pad-l
row-pad-xl
UTILIDADES AVANZADAS
Control de Flujo
grid-dense /* Llena espacios automáticamente */
grid-flow-row /* Elementos fluyen por filas */
grid-flow-col /* Elementos fluyen por columnas */
grid-flow-row-dense /* Por filas + dense */
grid-flow-col-dense /* Por columnas + dense */
Subgrid (para navegadores que lo soporten)
subgrid-cols /* Hereda columnas del grid padre */
subgrid-rows /* Hereda filas del grid padre */
dense: Llena espacios vacíos automáticamente
flow: Controla la dirección del flujo
subgrid: Para grids anidados (navegadores modernos)
GRID BÁSICO
¿Qué hace?
Establece las clases fundamentales para activar el sistema grid en cualquier elemento.
¿Para qué sirve?
• Convierte cualquier contenedor Divi en un grid container
• Proporciona la base para todos los layouts grid
Clases principales:
• .grid - Grid de bloque (ocupa todo el ancho disponible)
• .grid-inline - Grid inline (ocupa solo el espacio necesario)
Ejemplo práctico:
<!-- En Divi: Sección con clase "grid grid-cols-3" -->
<!-- Resultado: Una sección que se divide en 3 columnas iguales -->
COLUMNAS BÁSICAS (1-12)
¿Qué hace?
Define grids de 1 a 12 columnas con fracciones iguales (1fr cada una).
¿Para qué sirve?
• Crear layouts simétricos rápidamente
• Ideal para galerías, portfolios y contenido uniforme
CLASES RESPONSIVE ESPECÍFICAS
¿Qué hace?
Permite control manual sobre el número de columnas en diferentes dispositivos, sobrescribiendo el comportamiento automático.
¿Para qué sirve?
• Casos donde el comportamiento automático no es suficiente
• Optimización específica para mobile y tablet
¿Cómo se usan?
Se combinan con las clases de columnas principales.
Breakpoints:
• Mobile: Se activa en pantallas ≤ 640px
• Tablet: Se activa en pantallas ≤ 768px
• Desktop: Usa la clase principal (grid-cols-*)
COLUMNAS AUTO-RESPONSIVE
¿Qué hace?
Crea grids que se adaptan automáticamente según el espacio disponible usando auto-fit y minmax().
Auto-fit:
Las columnas se expanden para llenar el espacio
• grid-auto-xs (200px mínimo) → Para iconos o badges
• grid-auto-s (240px mínimo) → Para cards pequeñas
• grid-auto (280px mínimo) → Estándar recomendado
• grid-auto-m (320px mínimo) → Para cards medianas
• grid-auto-l (400px mínimo) → Para contenido amplio
• grid-auto-xl (480px mínimo) → Para elementos grandes
Auto-fill:
Se crean columnas vacías si sobra espacio
• grid-fill → Min 280px, llena espacios
• grid-fill-xs → Min 200px, llena espacios
• grid-fill-s → Min 240px, llena espacios
• grid-fill-m → Min 320px, llena espacios
• grid-fill-l → Min 400px, llena espacios
• grid-fill-xl → Min 480px, llena espacios
LAYOUTS PREDEFINIDOS
Layout Sidebar
¿Qué hace? Crea layouts típicos con sidebar y contenido principal.
Opciones:
• grid-sidebar-left → Sidebar izquierda (300px) + contenido principal
• grid-sidebar-right → Contenido principal + sidebar derecha (300px)
• grid-sidebar-both → Sidebar izquierda + contenido + sidebar derecha
Layout Hero
¿Qué hace? Crea una estructura de página completa con header, contenido y footer.
Layout Cards
Variantes:
• grid-cards-s (250px) → Cards compactas
• grid-cards (300px) → Estándar
• grid-cards-l (350px) → Cards amplias
Layout Masonry
¿Qué hace? Simula un efecto masonry donde los elementos se apilan naturalmente.
Uso: Portfolios, galerías con imágenes de diferentes alturas.
Layout Dashboard
¿Qué hace? Grid uniforme ideal para paneles de control o métricas.
Características: Todos los elementos tienen 200px de altura fija.
COLUMNAS FRACCIONARIAS
¿Qué hace?
Permite crear columnas con proporciones específicas usando la unidad fr.
Dos columnas:
• grid-1-3 → 25% | 75% (1fr + 2fr)
• grid-2-3 → 75% | 25% (2fr + 1fr)
• grid-1-4 → 20% | 80% (1fr + 3fr)
• grid-3-4 → 80% | 20% (3fr + 1fr)
• grid-1-5 → 17% | 83% (1fr + 4fr)
• grid-4-5 → 83% | 17% (4fr + 1fr)
Tres columnas:
• grid-1-2-1 → 25% | 50% | 25%
• grid-2-1-2 → 40% | 20% | 40%
• grid-1-1-2 → 25% | 25% | 50%
• grid-2-1-1 → 50% | 25% | 25%
FILAS
¿Qué hace?
Controla la altura y distribución vertical del grid.
Filas básicas:
• grid-rows-1 a grid-rows-6 → Define número de filas iguales
Filas automáticas:
• grid-rows-auto → Filas que se ajustan al contenido (min 100px)
• grid-rows-max → Filas que toman la altura del contenido más alto
• grid-rows-min → Filas que toman la altura mínima necesaria
COLUMN & ROW SPAN
¿Qué hace?
Permite que elementos ocupen múltiples columnas o filas.
Column Span:
• col-span-1 a col-span-12 → Ocupa X columnas
• col-span-full → Ocupa todas las columnas disponibles
Row Span:
• row-span-1 a row-span-6 → Ocupa X filas
• row-span-full → Ocupa todas las filas disponibles
Posicionamiento específico:
• col-start-* y col-end-* → Control preciso de posición
Ejemplo práctico:
<!-- Grid de 4 columnas -->
<!-- Elemento 1: col-span-2 (ocupa 2 columnas) -->
<!-- Elemento 2: col-span-2 (ocupa 2 columnas) -->
<!-- Elemento 3: col-span-full (ocupa las 4 columnas como header) -->
ALINEACIÓN
A. Justify Content (Alineación horizontal del grid)
• justify-start → Alinea el grid a la izquierda
• justify-center → Centra el grid
• justify-end → Alinea el grid a la derecha
• justify-between → Distribuye con espacio entre elementos
• justify-around → Distribuye con espacio alrededor
• justify-evenly → Distribuye con espaciado uniforme
B. Align Content (Alineación vertical del grid)
• content-start, content-center, content-end
• content-between, content-around, content-evenly
C. Items (Alineación de elementos individuales)
• items-start → Elementos al inicio de su celda
• items-center → Elementos centrados (muy útil)
• items-end → Elementos al final
• items-stretch → Elementos ocupan toda la celda
D. Self (Alineación individual)
• justify-self-* → Alineación horizontal de un elemento específico
• self-* → Alineación vertical de un elemento específico
GRID AREAS NOMBRADAS
¿Qué hace?
Permite nombrar áreas específicas del grid para un control semántico.
Areas disponibles:
• area-header, area-nav, area-main
• area-sidebar, area-left-sidebar, area-right-sidebar
• area-content, area-footer, area-aside
Ejemplo práctico:
<!-- Sección con grid-sidebar-left -->
<!-- Módulo 1: area-sidebar (aparece en la barra lateral) -->
<!-- Módulo 2: area-main (aparece en el contenido principal) -->
UTILIDADES AVANZADAS
Grid Flow:
• grid-dense → Llena espacios automáticamente
• grid-flow-row → Flujo por filas (predeterminado)
• grid-flow-col → Flujo por columnas
• grid-flow-row-dense → Por filas + rellenado automático
Subgrid:
• subgrid-cols → Hereda columnas del grid padre
• subgrid-rows → Hereda filas del grid padre
Ejemplo práctico:
grid-dense es perfecto para portfolios donde elementos de diferentes tamaños deben rellenar espacios automáticamente.