Diseño Responsive con CSS Grid

CSS Grid es un sistema de maquetación bidimensional que ha revolucionado la forma en que diseñamos interfaces web. A diferencia de Flexbox, que es principalmente unidimensional, Grid permite controlar tanto las filas como las columnas, lo que lo convierte en una herramienta ideal para crear maquetaciones complejas y responsive.

Introducción a CSS Grid

CSS Grid permite dividir una página en una cuadrícula de filas y columnas, y luego colocar elementos en esa cuadrícula. Es como tener un sistema de tablas HTML, pero con mucha más flexibilidad y control.

Creación de una cuadrícula básica

Para crear una cuadrícula, utiliza la propiedad display: grid en un contenedor:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columnas de 200px */
  grid-template-rows: 100px 100px; /* 2 filas de 100px */
  gap: 20px; /* Espacio entre las celdas */
}

Unidades fr y repeat()

La unidad fr (fracción) es especialmente útil para crear maquetaciones responsive:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Proporción 1:2:1 */
  grid-template-rows: auto;
}

La función repeat() permite repetir valores:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  grid-template-rows: repeat(2, 100px); /* 2 filas de 100px */
}

Colocación de los elementos en la cuadrícula

Puedes colocar elementos de forma precisa en la cuadrícula:

.item1 {
  grid-column: 1 / 3; /* De la línea 1 a la línea 3 */
  grid-row: 1 / 2; /* De la fila 1 a la fila 2 */
}

/* O con las propiedades start/end */
.item2 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

Cuadrículas responsive con minmax() y auto-fill/auto-fit

La función minmax() permite definir un tamaño mínimo y máximo:

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

• auto-fill: crea tantas columnas como sea posible
• auto-fit: estira las columnas existentes para rellenar el espacio

Áreas de cuadrícula con nombre

Puedes dar nombre a las áreas de tu cuadrícula para una colocación más intuitiva:

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Ejemplo de maquetación responsive

Este es un ejemplo de maquetación responsive que se adapta a distintos tamaños de pantalla:

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

/* En pantallas pequeñas, apilar los elementos */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Maquetación avanzada con Grid Areas

Puedes crear maquetaciones complejas que cambian en función del tamaño de la pantalla:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Alineación en Grid

CSS Grid ofrece varias propiedades para alinear los elementos:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Alineación horizontal de los elementos dentro de sus celdas */
  justify-items: start | end | center | stretch;
  
  /* Alineación vertical de los elementos dentro de sus celdas */
  align-items: start | end | center | stretch;
  
  /* Alineación horizontal de la cuadrícula completa */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* Alineación vertical de la cuadrícula completa */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Ejemplo práctico: galería de imágenes responsive

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

Conclusión

CSS Grid es una herramienta potente para crear maquetaciones web responsive y complejas. Al combinar Grid con las media queries, puedes crear sitios que se adapten perfectamente a cualquier tamaño de pantalla.

Para profundizar tus conocimientos sobre CSS Grid, te recomiendo explorar la documentación de MDN y practicar con herramientas interactivas como Grid Garden.