CSS Grid Layout

CSS Grid Layout es un sistema de diseño bidimensional que permite crear estructuras complejas con filas y columnas de manera sencilla y predecible. A diferencia de Flexbox, que está orientado a diseños unidimensionales, Grid está diseñado específicamente para controlar tanto filas como columnas simultáneamente.

Conceptos básicos de CSS Grid

CSS Grid se basa en dos componentes principales:

1. Contenedor Grid (Grid Container): El elemento padre que tiene display: grid o display: inline-grid.
2. Elementos Grid (Grid Items): Los hijos directos del contenedor grid.

<div class="contenedor-grid">
  <div class="elemento">1</div>
  <div class="elemento">2</div>
  <div class="elemento">3</div>
  <div class="elemento">4</div>
  <div class="elemento">5</div>
  <div class="elemento">6</div>
</div>

.contenedor-grid {
  display: grid;
}

Terminología de Grid

• Líneas de cuadrícula (Grid Lines): Las líneas horizontales y verticales que dividen la cuadrícula.
• Pistas de cuadrícula (Grid Tracks): El espacio entre dos líneas adyacentes (filas o columnas).
• Celdas de cuadrícula (Grid Cells): La unidad más pequeña en una cuadrícula, como una celda en una tabla.
• Áreas de cuadrícula (Grid Areas): Cualquier rectángulo formado por cuatro líneas de cuadrícula.

Propiedades del Contenedor Grid

display

Define un contenedor grid:

.contenedor {
  display: grid; /* o inline-grid */
}

grid-template-columns y grid-template-rows

Define el tamaño y número de columnas y filas:

.contenedor {
  /* 3 columnas: 100px, 200px y 1fr */
  grid-template-columns: 100px 200px 1fr;
  
  /* 2 filas: 80px y auto */
  grid-template-rows: 80px auto;
}

La unidad fr (fracción) distribuye el espacio disponible proporcionalmente:

.contenedor {
  /* 3 columnas de igual ancho */
  grid-template-columns: 1fr 1fr 1fr;
  
  /* Equivalente a lo anterior */
  grid-template-columns: repeat(3, 1fr);
  
  /* Primera columna 2 veces más ancha que las otras */
  grid-template-columns: 2fr 1fr 1fr;
}

gap, row-gap, column-gap

Define el espacio entre filas y columnas:

.contenedor {
  row-gap: 10px; /* Espacio entre filas */
  column-gap: 20px; /* Espacio entre columnas */
  
  /* Abreviatura para row-gap y column-gap */
  gap: 10px 20px;
  
  /* Si ambos valores son iguales */
  gap: 15px;
}

justify-items y align-items

Alinean los elementos grid dentro de sus celdas:

.contenedor {
  justify-items: start; /* Alineación horizontal: start, end, center, stretch */
  align-items: center; /* Alineación vertical: start, end, center, stretch */
}

justify-content y align-content

Alinean la cuadrícula completa dentro del contenedor cuando la cuadrícula es más pequeña que el contenedor:

.contenedor {
  justify-content: space-between; /* Distribución horizontal */
  align-content: space-around; /* Distribución vertical */
}

Valores posibles: start, end, center, stretch, space-around, space-between, space-evenly.

grid-template-areas

Define áreas con nombres para crear diseños complejos:

.contenedor {
  grid-template-areas:
    "cabecera cabecera cabecera"
    "nav contenido sidebar"
    "footer footer footer";
}

grid-auto-columns y grid-auto-rows

Define el tamaño de las filas y columnas generadas automáticamente:

.contenedor {
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: 1fr;
}

grid-auto-flow

Controla cómo se colocan los elementos automáticamente:

.contenedor {
  grid-auto-flow: row; /* o column, dense */
}

Propiedades de los Elementos Grid

grid-column y grid-row

Especifica en qué columna/fila comienza y termina un elemento:

.elemento {
  grid-column: 1 / 3; /* Desde la línea 1 hasta la línea 3 */
  grid-row: 2 / 4; /* Desde la línea 2 hasta la línea 4 */
  
  /* Alternativa: especificar inicio y extensión */
  grid-column: 1 / span 2; /* Comienza en 1 y abarca 2 columnas */
  
  /* También se puede usar grid-column-start y grid-column-end */
  grid-column-start: 1;
  grid-column-end: 3;
}

grid-area

Asigna un elemento a un área nombrada o especifica su posición:

/* Usando áreas nombradas */
.cabecera {
  grid-area: cabecera;
}

.contenido {
  grid-area: contenido;
}

/* Usando posición: row-start/column-start/row-end/column-end */
.elemento {
  grid-area: 1 / 2 / 3 / 4;
}

justify-self y align-self

Sobrescriben la alineación especificada por justify-items y align-items para un elemento específico:

.elemento-especial {
  justify-self: end; /* Alineación horizontal individual */
  align-self: start; /* Alineación vertical individual */
}

Funciones y valores especiales

repeat()

Repite un patrón de valores:

.contenedor {
  /* 5 columnas de 1fr */
  grid-template-columns: repeat(5, 1fr);
  
  /* Patrón repetido: 100px, 200px, 100px, 200px */
  grid-template-columns: repeat(2, 100px 200px);
}

minmax()

Define un rango de tamaño entre un mínimo y un máximo:

.contenedor {
  /* Columnas que tienen mínimo 100px y máximo 1fr */
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  
  /* Filas que tienen mínimo 100px y se ajustan al contenido */
  grid-template-rows: repeat(2, minmax(100px, auto));
}

auto-fill y auto-fit

Crean tantas columnas como quepan en el contenedor:

.contenedor {
  /* Crea tantas columnas de 200px como quepan */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
  /* Similar a auto-fill, pero colapsa las columnas vacías */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Ejemplos prácticos de CSS Grid

Diseño básico de página

<div class="grid-pagina">
  <header>Cabecera</header>
  <nav>Navegación</nav>
  <main>Contenido principal</main>
  <aside>Barra lateral</aside>
  <footer>Pie de página</footer>
</div>

.grid-pagina {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 80px;
  min-height: 100vh;
  gap: 10px;
}

header {
  grid-area: header;
  background-color: #f0f0f0;
}

nav {
  grid-area: nav;
  background-color: #e0e0e0;
}

main {
  grid-area: main;
  background-color: #f8f8f8;
}

aside {
  grid-area: aside;
  background-color: #e0e0e0;
}

footer {
  grid-area: footer;
  background-color: #f0f0f0;
}

/* Diseño responsive */
@media (max-width: 768px) {
  .grid-pagina {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
  }
}

Galería de imágenes

<div class="galeria">
  <div class="imagen destacada">Imagen destacada</div>
  <div class="imagen">Imagen 2</div>
  <div class="imagen">Imagen 3</div>
  <div class="imagen">Imagen 4</div>
  <div class="imagen">Imagen 5</div>
  <div class="imagen">Imagen 6</div>
</div>

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.imagen {
  height: 200px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.destacada {
  grid-column: span 2;
  grid-row: span 2;
  height: auto;
}

Diseño de panel de control (Dashboard)

<div class="dashboard">
  <div class="widget header">Encabezado</div>
  <div class="widget estadisticas">Estadísticas</div>
  <div class="widget grafico-principal">Gráfico Principal</div>
  <div class="widget actividad-reciente">Actividad Reciente</div>
  <div class="widget notificaciones">Notificaciones</div>
  <div class="widget tareas">Tareas Pendientes</div>
</div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: 15px;
  padding: 15px;
}

.widget {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header {
  grid-column: 1 / -1;
}

.estadisticas {
  grid-column: span 2;
}

.grafico-principal {
  grid-column: 3 / span 2;
  grid-row: 2 / span 2;
}

.actividad-reciente {
  grid-column: 1 / span 2;
}

.notificaciones {
  grid-column: 1;
}

.tareas {
  grid-column: 2;
}

@media (max-width: 992px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grafico-principal,
  .estadisticas,
  .actividad-reciente {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

Técnicas avanzadas de CSS Grid

Alineación de cuadrícula densa

La propiedad grid-auto-flow: dense permite llenar los huecos en la cuadrícula:

.contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: dense;
  gap: 10px;
}

.ancho {
  grid-column: span 2;
}

.alto {
  grid-row: span 2;
}

Superposición de elementos

Los elementos en Grid pueden superponerse:

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.elemento1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background-color: rgba(255, 0, 0, 0.5);
}

.elemento2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background-color: rgba(0, 0, 255, 0.5);
  z-index: 1; /* Controla el orden de apilamiento */
}

Diseños responsivos con Grid

CSS Grid facilita la creación de diseños responsivos sin media queries usando auto-fit o auto-fill:

.contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

También se pueden combinar con media queries para cambios más específicos:

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 992px) {
  .contenedor {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .contenedor {
    grid-template-columns: 1fr;
  }
}

Ventajas de CSS Grid

1. Control bidimensional: Permite controlar filas y columnas simultáneamente.
2. Diseños complejos: Facilita la creación de diseños que serían difíciles con otros métodos.
3. Menos HTML anidado: Reduce la necesidad de elementos contenedores adicionales.
4. Alineación precisa: Ofrece control preciso sobre la alineación y distribución.
5. Diseño responsivo: Facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla.

CSS Grid vs. Flexbox

• CSS Grid es ideal para:
  • Diseños bidimensionales (filas y columnas simultáneamente)
  • Diseños de página completos
  • Posicionamiento preciso de elementos
• Flexbox es ideal para:
  • Diseños unidimensionales (filas o columnas)
  • Componentes de interfaz pequeños
  • Alineación de elementos

En la práctica, lo mejor es usar ambos: Grid para el diseño general de la página y Flexbox para componentes individuales.

Compatibilidad con navegadores

CSS Grid es compatible con todos los navegadores modernos. Sin embargo, si necesitas soporte para IE11, tendrás que usar una sintaxis ligeramente diferente o proporcionar alternativas.

/* Para navegadores modernos */
.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Para IE11 */
.contenedor {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;
}