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.