Grid: columnas, filas, áreas

Construye galerías y maquetaciones de página completas con las columnas, filas y áreas con nombre de CSS Grid.

9 min · 3 preguntas

Flexbox alinea a lo largo de un eje; Grid controla ambos a la vez. En cuanto tu maqueta parezca una tabla (galería de fotos, panel de control, página completa con encabezado, barra lateral y pie), Grid es la herramienta adecuada. El contenedor define la estructura en columnas y filas, y los hijos se colocan automáticamente o exactamente donde tú elijas.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

La unidad fr (fracción) reparte el espacio disponible: 1fr 2fr crea dos columnas donde la segunda es el doble de ancha. A diferencia de los porcentajes, fr tiene en cuenta el gap sin ningún cálculo por tu parte. Para destacar un elemento, haz que abarque varias pistas con grid-column y grid-row.

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Para una página completa, grid-template-areas te permite dibujar la maqueta directamente en el CSS. Cada cadena representa una fila de la cuadrícula, cada palabra un área con nombre. Un hijo se coloca luego con grid-area. El resultado se lee como el plano de un arquitecto: es el método más legible para la maquetación de una página.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué representa la unidad fr en grid-template-columns: 1fr 2fr?
   • Una fracción del espacio disponible del contenedor
   • Un porcentaje del ancho de la pantalla
   • Un tamaño fijo expresado en píxeles
2. ¿Qué declaración crea tres columnas de igual ancho?
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. ¿Para qué sirve grid-template-areas?
   • Para nombrar áreas de la cuadrícula donde los hijos se colocan mediante grid-area
   • Para definir el tamaño de las columnas de la cuadrícula
   • Para crear animaciones entre celdas