Grid Avanzado

Aprende a dominar CSS Grid con tres técnicas clave que simplifican la maquetación: grid areas, span y grid lines. Con estos patrones podrás definir un layout completo, extender elementos por columnas o filas y posicionarlos con precisión, todo desde CSS, de forma clara y escalable.

¿Cómo crear un layout con grid areas en CSS?

Con grid-template-areas defines un template visual del layout y con grid-area enlazas cada elemento. Así posicionas header, sidebar, content y footer sin cálculos complejos.

• display: grid activa el modelo de cuadrícula.
• grid-template-areas dibuja el layout con nombres de áreas.
• grid-template-columns define anchos (ej: 200px y 1fr).
• gap y margin-bottom mejoran la separación visual.
• grid-area enlaza cada bloque con su área del template.

¿Cómo declarar el template de áreas?

.grid-areas { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 200px 1fr; gap: 10px; margin-bottom: 20px; } /* Estilos base compartidos */ header, .sidebar, .content, footer { padding: 20px; text-align: center; color: white; }

¿Cómo linkear elementos con grid area?

header { grid-area: header; background: #2ECC71; } .sidebar { grid-area: sidebar; background: #E74C3C; } .content { grid-area: content; background: #3498DB; } footer { grid-area: footer; background: purple; }

• header ocupa el 100% del ancho al repetirse en la fila: "header header".
• sidebar queda a la izquierda y content a la derecha.
• footer también ocupa el 100% con "footer footer".
• Verifica que los nombres de clases coincidan (ej: .sidebar y no .bar).

¿Cuándo usar span para extender columnas en grid?

Cuando quieres que un ítem se extienda a través de varias columnas o filas consecutivas sin recalcular fracciones, usa span. Es directo y legible.

.grid-span { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } /* Extender un elemento por 2 columnas */ .item--span-2 { grid-column: span 2; }

• grid-column: span 2 extiende el elemento por dos columnas.
• Alternativa más simple que ajustar muchas fracciones con 1fr.
• Escalable para diseños con muchos elementos.

¿Qué son las grid lines y cómo posicionar por líneas?

Las grid lines son las líneas delimitadoras de columnas y filas. En lugar de pensar en fracciones o span, defines desde qué línea hasta cuál colocar el elemento, tanto en columnas como en filas.

.grid-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } /* Posicionar por columnas: de la línea 1 a la 3 */ .box-1 { grid-column: 1 / 3; background: red; } /* Posicionar por filas: de la línea 1 a la 3 */ .box-2 { grid-row: 1 / 3; background: green; }

• Las líneas se cuentan desde el borde izquierdo/arriba hacia la derecha/abajo.
• grid-column: 1 / 3 ocupa desde la línea 1 hasta la 3 (dos columnas de ancho).
• grid-row: 1 / 3 ocupa desde la línea 1 hasta la 3 (dos filas de alto).
• Útil cuando necesitas posiciones precisas sin depender de nombres de áreas o span.

¿Te gustaría ver más patrones con CSS Grid o resolver un caso específico? Deja tu duda en los comentarios y cuéntame qué layout quieres construir.