CSS Grid para crear layouts y estructuras

Concepto de cuadrícula y terminología de CSS Grid

CSS Grid Layout (o simplemente Grid) es un sistema de diseño bidimensional que revoluciona la forma en que estructuramos páginas web. A diferencia de los métodos tradicionales, Grid nos permite trabajar simultáneamente con filas y columnas, creando cuadrículas donde podemos colocar elementos con precisión milimétrica.

La idea fundamental detrás de Grid es dividir el espacio disponible en una serie de líneas invisibles que forman una estructura de cuadrícula. Esta estructura nos permite posicionar elementos de manera precisa y consistente, sin necesidad de utilizar técnicas de posicionamiento complejas o "trucos" de CSS.

Anatomía de una cuadrícula

Una cuadrícula de CSS Grid está compuesta por varios elementos fundamentales:

• Contenedor grid: Es el elemento padre al que aplicamos display: grid. Este contenedor es el que define la cuadrícula principal.

.container {
  display: grid;
}

• Elementos grid: Son los hijos directos del contenedor grid. Estos elementos se posicionan automáticamente en la cuadrícula o pueden ser colocados explícitamente.

<div class="container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
</div>

• Líneas grid: Son las líneas horizontales y verticales que dividen la cuadrícula. Se numeran empezando por 1, aunque también podemos nombrarlas.


• Pistas grid: Son los espacios entre dos líneas adyacentes, equivalentes a filas y columnas.

• Celdas grid: Es la unidad más pequeña de la cuadrícula, formada por la intersección de una fila y una columna.

• Áreas grid: Son regiones rectangulares compuestas por una o más celdas que podemos nombrar para facilitar la colocación de elementos.

Creando una cuadrícula básica

Para crear una cuadrícula básica, necesitamos definir el número y tamaño de las filas y columnas. Esto se hace mediante las propiedades grid-template-columns y grid-template-rows:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

Este código crea una cuadrícula de 3 columnas de 200px y 2 filas de 100px.

Unidad fr y funciones especiales

CSS Grid introduce la unidad fr (fracción), que representa una fracción del espacio disponible. Esta unidad es extremadamente útil para crear diseños flexibles:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

En este ejemplo, el espacio disponible se divide en 4 partes (1+2+1), asignando 1/4 a la primera columna, 2/4 a la segunda y 1/4 a la tercera.

Grid también ofrece funciones especiales como repeat() para evitar repeticiones:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Equivalente a: grid-template-columns: 1fr 1fr 1fr; */
}

Y minmax() para establecer tamaños mínimos y máximos:

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 2fr;
}

En este caso, la primera columna tendrá como mínimo 100px, pero podrá crecer hasta ocupar 1fr si hay espacio disponible.

Grid implícito vs. Grid explícito

El grid explícito es el que definimos con grid-template-columns y grid-template-rows. Sin embargo, si colocamos elementos fuera de esta cuadrícula definida, Grid creará automáticamente filas o columnas adicionales, formando el grid implícito.

Podemos controlar cómo se comporta este grid implícito con las propiedades grid-auto-rows y grid-auto-columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  grid-auto-rows: 50px; /* Las filas implícitas tendrán 50px de alto */
}

Espaciado en la cuadrícula

Para añadir espaciado entre filas y columnas, utilizamos las propiedades gap, row-gap y column-gap:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Espacio de 20px entre filas y columnas */
  /* Alternativa: */
  row-gap: 20px; /* Espacio entre filas */
  column-gap: 10px; /* Espacio entre columnas */
}

Alineación en Grid

Grid ofrece propiedades potentes para alinear elementos tanto a nivel de cuadrícula como a nivel de elementos individuales:

• Alineación de la cuadrícula completa:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  width: 500px;
  height: 500px;
  
  /* Alineación horizontal de todas las columnas */
  justify-content: center; /* start | end | center | space-between | space-around | space-evenly */
  
  /* Alineación vertical de todas las filas */
  align-content: center; /* start | end | center | space-between | space-around | space-evenly */
}

• Alineación de elementos individuales dentro de sus celdas:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Alineación horizontal de todos los elementos */
  justify-items: center; /* start | end | center | stretch */
  
  /* Alineación vertical de todos los elementos */
  align-items: center; /* start | end | center | stretch */
}

/* O para un elemento específico */
.item {
  justify-self: end; /* start | end | center | stretch */
  align-self: start; /* start | end | center | stretch */
}

Ejemplo práctico

Veamos un ejemplo práctico de una cuadrícula simple para una galería de imágenes:

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

.gallery-item {
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

Este código crea una galería de imágenes con 3 columnas de igual ancho y un espacio de 16px entre ellas. Cada elemento de la galería tiene un fondo gris claro, bordes redondeados y un pequeño padding.

La terminología de CSS Grid puede parecer abrumadora al principio, pero una vez que te familiarices con estos conceptos básicos, descubrirás que Grid ofrece una forma intuitiva y potente de crear diseños web complejos con mucho menos código y mayor control que los métodos tradicionales.

Diferencias fundamentales entre Grid y Flexbox

Flexbox y Grid son dos sistemas de diseño en CSS que revolucionaron la forma de crear layouts en la web. Aunque ambos resuelven problemas de posicionamiento, tienen enfoques y casos de uso diferentes que los hacen complementarios en lugar de competitivos.

Dimensionalidad: unidimensional vs bidimensional

La diferencia más fundamental entre ambos sistemas radica en su dimensionalidad:

• Flexbox es un sistema unidimensional que trabaja con una sola dimensión a la vez (filas O columnas).
• Grid es un sistema bidimensional que trabaja simultáneamente con filas Y columnas.

/* Ejemplo de Flexbox - unidimensional (en fila) */
.container-flex {
  display: flex;
  justify-content: space-between;
}

/* Ejemplo de Grid - bidimensional (filas y columnas) */
.container-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

Enfoque de diseño: contenido vs layout

Otra diferencia crucial está en su enfoque de diseño:

• Flexbox es content-first: el tamaño del contenido influye en cómo se distribuye el espacio.
• Grid es layout-first: primero defines la estructura y luego colocas el contenido en ella.

/* Flexbox se adapta al contenido */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 1 200px; /* Crecerá, se encogerá, base de 200px */
}

/* Grid define primero la estructura */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
}

Control sobre el posicionamiento

El nivel de control sobre el posicionamiento también difiere:

• Flexbox ofrece control sobre la alineación, orden y distribución de espacio entre elementos, pero principalmente en una dirección.
• Grid proporciona control preciso sobre la ubicación en dos dimensiones, permitiendo posicionar elementos exactamente donde se necesitan.

/* Flexbox: control en una dirección */
.flex-container {
  display: flex;
  justify-content: space-between; /* Distribución horizontal */
  align-items: center; /* Alineación vertical */
}

/* Grid: control preciso en dos dimensiones */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.header {
  grid-column: 1 / 5; /* Ocupa de la línea 1 a la 5 horizontalmente */
  grid-row: 1; /* Primera fila */
}

.sidebar {
  grid-column: 1; /* Primera columna */
  grid-row: 2 / 4; /* De la línea 2 a la 4 verticalmente */
}

Alineación y distribución de espacio

Ambos sistemas ofrecen opciones de alineación, pero con enfoques diferentes:

• Flexbox destaca en la distribución de espacio entre elementos y su alineación en el eje principal y transversal.
• Grid permite alineación tanto a nivel de cuadrícula completa como de elementos individuales, con mayor precisión en ambas dimensiones.

/* Flexbox: distribución de espacio entre elementos */
.flex-container {
  display: flex;
  justify-content: space-around; /* Distribución horizontal */
  align-items: stretch; /* Estiramiento vertical */
}

/* Grid: alineación a nivel de cuadrícula y elementos */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center; /* Centra la cuadrícula horizontalmente */
  align-content: center; /* Centra la cuadrícula verticalmente */
  justify-items: start; /* Alinea elementos al inicio de sus celdas */
  align-items: end; /* Alinea elementos al final de sus celdas */
}

Flujo y dirección

El comportamiento del flujo de elementos también es diferente:

• Flexbox permite cambiar fácilmente entre dirección horizontal y vertical con la propiedad flex-direction.
• Grid establece una estructura fija de filas y columnas donde los elementos se colocan según coordenadas.

/* Flexbox: cambio de dirección */
.flex-container {
  display: flex;
  flex-direction: row; /* horizontal (predeterminado) */
}

.flex-container-vertical {
  display: flex;
  flex-direction: column; /* vertical */
}

/* Grid: estructura fija de coordenadas */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Los elementos fluyen por filas */
}

Anidamiento y complejidad

El comportamiento al anidar contenedores también difiere:

• Flexbox es ideal para componentes de interfaz más simples y alineaciones en una dirección.
• Grid brilla en layouts complejos y estructuras de página completas.

/* Flexbox: ideal para componentes de UI */
.card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid: ideal para layouts complejos */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content sidebar"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Casos de uso ideales

Basándonos en sus características, cada sistema tiene escenarios donde destaca:

• Flexbox es ideal para:

• Barras de navegación y menús
• Alineación de elementos en una línea o columna
• Distribución de espacio entre elementos similares
• Centrado vertical y horizontal simple

• Grid es ideal para:

• Layouts de página completos
• Sistemas de cuadrícula para galerías o tarjetas
• Posicionamiento preciso de elementos
• Diseños que requieren superposición de elementos

Enfoque combinado: lo mejor de ambos mundos

En proyectos reales, lo más efectivo suele ser combinar ambos sistemas:

/* Layout principal con Grid */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Componentes internos con Flexbox */
.navigation {
  grid-column: 1;
  grid-row: 1 / 3;
  
  /* Flexbox para el menú vertical */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header {
  grid-column: 2;
  grid-row: 1;
  
  /* Flexbox para alinear elementos del encabezado */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Este enfoque aprovecha las fortalezas de cada sistema: Grid para la estructura general de la página y Flexbox para componentes y alineaciones específicas dentro de esa estructura.

En resumen, Grid y Flexbox no compiten entre sí, sino que se complementan. Entender las diferencias fundamentales entre ambos te permitirá elegir la herramienta adecuada para cada situación de diseño, creando interfaces más robustas y mantenibles con menos código.

Líneas, pistas, celdas y áreas en Grid

Cuando trabajamos con CSS Grid, es fundamental comprender los elementos estructurales que componen una cuadrícula. Estos componentes nos permiten posicionar y organizar el contenido con precisión, aprovechando todo el potencial de este sistema de layout.

Líneas de la cuadrícula

Las líneas son los elementos divisorios invisibles que forman la estructura básica de la cuadrícula. Estas líneas se numeran automáticamente empezando por 1, tanto en el eje horizontal como en el vertical.

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 150px;
}

En este ejemplo, tenemos:

• 4 líneas verticales (numeradas del 1 al 4)
• 3 líneas horizontales (numeradas del 1 al 3)

Podemos referirnos a estas líneas por su número para posicionar elementos:

.item {
  grid-column-start: 1; /* Comienza en la línea vertical 1 */
  grid-column-end: 3;   /* Termina en la línea vertical 3 */
  grid-row-start: 2;    /* Comienza en la línea horizontal 2 */
  grid-row-end: 3;      /* Termina en la línea horizontal 3 */
}

También podemos nombrar las líneas para hacer nuestro código más semántico:

.container {
  display: grid;
  grid-template-columns: [inicio] 100px [medio] 200px [final] 100px;
  grid-template-rows: [cabecera-inicio] 50px [cabecera-fin contenido-inicio] 150px [contenido-fin];
}

.header {
  grid-column: inicio / final;
  grid-row: cabecera-inicio / cabecera-fin;
}

Pistas de la cuadrícula

Las pistas son los espacios entre dos líneas adyacentes, equivalentes a las filas y columnas de nuestra cuadrícula. Cada pista tiene un tamaño que podemos definir con diferentes unidades:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;    /* Tres pistas de columna */
  grid-template-rows: auto 150px minmax(100px, auto); /* Tres pistas de fila */
}

En este ejemplo:

• La primera pista de columna ocupa 1 fracción del espacio disponible
• La segunda pista de columna ocupa 2 fracciones
• La primera pista de fila se ajusta automáticamente al contenido
• La tercera pista de fila tendrá un mínimo de 100px y crecerá si es necesario

Para crear pistas repetitivas, podemos usar la función repeat():

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Equivale a: 1fr 1fr 1fr */
  grid-template-rows: repeat(2, 100px 50px); /* Equivale a: 100px 50px 100px 50px */
}

Celdas de la cuadrícula

Una celda es la unidad más pequeña de la cuadrícula, formada por la intersección de una pista de fila y una pista de columna. Es el equivalente a una celda en una tabla HTML.

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

.item {
  grid-column: 2; /* Ocupa la segunda celda horizontalmente */
  grid-row: 1;    /* Ocupa la primera celda verticalmente */
}

Podemos hacer que un elemento ocupe múltiples celdas usando la notación de línea de inicio/fin o la notación abreviada:

.item {
  /* Notación extendida */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  
  /* Notación abreviada (equivalente) */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  
  /* Notación con span (también equivalente) */
  grid-column: 1 / span 2; /* Comienza en línea 1 y abarca 2 celdas */
  grid-row: 1; /* Ocupa solo una celda verticalmente */
}

Áreas de la cuadrícula

Las áreas son regiones rectangulares compuestas por una o más celdas que podemos nombrar para facilitar la colocación de elementos. Esta es una de las características más potentes de Grid para crear layouts complejos.

Definimos áreas con la propiedad grid-template-areas:

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

Cada cadena representa una fila, y cada palabra dentro de la cadena representa una celda. Las palabras repetidas crean áreas más grandes.

Luego, asignamos elementos a estas áreas:

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

Para indicar celdas vacías, usamos puntos:

.container {
  grid-template-areas: 
    "header header header"
    "sidebar content ."
    "footer footer footer";
}

Relación entre áreas y líneas

Cuando definimos áreas, Grid crea automáticamente líneas nombradas basadas en esos nombres de áreas:

/* Al definir un área llamada "header" */
.container {
  grid-template-areas: "header header header";
}

/* Se crean automáticamente estas líneas nombradas */
/* header-start y header-end */

/* Podemos usarlas así: */
.item {
  grid-column: header-start / header-end;
}

Ejemplo práctico: Layout de página con áreas

Veamos un ejemplo completo de un layout de página usando áreas:

.page {
  display: grid;
  height: 100vh;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas: 
    "header header header"
    "nav content sidebar"
    "footer footer footer";
  gap: 10px;
}

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

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

.content {
  grid-area: content;
  background-color: #ffffff;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e0e0e0;
}

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

Este código crea un layout de página completo con cabecera, pie de página, navegación lateral, contenido principal y barra lateral, todo con unas pocas líneas de CSS.

Superposición de elementos

Una característica única de Grid es la capacidad de superponer elementos en la misma celda o área:

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

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

.item2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background-color: rgba(0, 0, 255, 0.5);
  z-index: 1; /* Controla qué elemento aparece encima */
}

En este ejemplo, los elementos se superponen en la celda central, y usamos z-index para controlar cuál aparece encima.

Dominar estos conceptos estructurales de Grid (líneas, pistas, celdas y áreas) te permitirá crear layouts complejos y precisos con un código mucho más limpio y mantenible que con métodos tradicionales de CSS.

Navegadores compatibles y detección de soporte

CSS Grid es una tecnología relativamente moderna que ha transformado la forma en que diseñamos layouts web. Sin embargo, como ocurre con cualquier característica CSS avanzada, es importante conocer su compatibilidad con los navegadores y saber cómo detectar si está disponible para nuestros usuarios.

Soporte actual en navegadores

Actualmente, CSS Grid cuenta con un excelente soporte en todos los navegadores modernos. Los principales navegadores implementaron Grid a partir de 2017, y hoy en día la compatibilidad es muy amplia:

• Chrome: Soporte completo desde la versión 57 (marzo 2017)
• Firefox: Soporte completo desde la versión 52 (marzo 2017)
• Safari: Soporte completo desde la versión 10.1 (marzo 2017)
• Edge: Soporte completo desde la versión 16 (octubre 2017)
• Opera: Soporte completo desde la versión 44 (marzo 2017)
• Samsung Internet: Soporte completo desde la versión 6.2 (abril 2017)

Para navegadores móviles, la situación es igualmente favorable, con Android Browser e iOS Safari ofreciendo soporte completo en sus versiones actuales.

/* Este código funcionará en todos los navegadores modernos */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Navegadores antiguos y limitaciones

Es importante tener en cuenta que Internet Explorer 11 tiene un soporte parcial de CSS Grid, basado en una implementación más antigua de la especificación. Esto significa que algunas propiedades funcionan de manera diferente o no están disponibles:

• No soporta grid-gap (ahora gap)
• No soporta grid-template-areas
• Utiliza un prefijo -ms- para las propiedades grid
• Tiene una sintaxis ligeramente diferente para algunas propiedades

/* Ejemplo para IE11 */
.container {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;
}

.item {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

Detección de soporte con @supports

CSS ofrece la regla @supports que nos permite detectar si el navegador soporta una característica específica. Esto es especialmente útil para proporcionar alternativas cuando CSS Grid no está disponible:

/* Solución alternativa para navegadores sin soporte */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 30%;
  margin: 1.66%;
}

/* Solución con Grid para navegadores compatibles */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .item {
    width: auto;
    margin: 0;
  }
}

En este ejemplo, primero definimos un layout basado en Flexbox como alternativa, y luego, dentro del bloque @supports, sobrescribimos esas propiedades con nuestra implementación de Grid para navegadores que lo soportan.

Detección con JavaScript

También podemos usar JavaScript para detectar el soporte de CSS Grid y aplicar clases específicas al elemento <html> o <body>:

// Detectar soporte de Grid
if (window.CSS && CSS.supports('display', 'grid')) {
  document.documentElement.classList.add('grid-supported');
} else {
  document.documentElement.classList.add('no-grid-support');
}

Luego podemos usar estas clases en nuestro CSS:

/* Estilos para navegadores sin soporte */
.no-grid-support .container {
  display: flex;
  flex-wrap: wrap;
}

/* Estilos para navegadores con soporte */
.grid-supported .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Enfoque de mejora progresiva

La mejora progresiva es una filosofía de desarrollo web que consiste en crear primero una experiencia básica funcional para todos los usuarios, y luego mejorarla para aquellos con navegadores más modernos.

Para CSS Grid, esto significa:

1. Crear primero un layout básico que funcione en todos los navegadores
2. Mejorar ese layout con Grid para navegadores compatibles

/* Layout básico para todos los navegadores */
.gallery {
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-item {
  float: left;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Media queries para navegadores sin Grid */
@media (min-width: 600px) {
  .gallery-item {
    width: 50%;
  }
}

@media (min-width: 900px) {
  .gallery-item {
    width: 33.33%;
  }
}

/* Mejora con Grid para navegadores compatibles */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .gallery-item {
    width: auto;
    float: none;
    padding: 0;
  }
}

Herramientas para verificar compatibilidad

Existen varias herramientas online que te permiten verificar la compatibilidad de CSS Grid en diferentes navegadores:

• Can I Use: Proporciona tablas detalladas de compatibilidad para todas las características web
• MDN Web Docs: Ofrece información precisa sobre compatibilidad de navegadores
• Modernizr: Biblioteca JavaScript que detecta características HTML5 y CSS3

Uso de autoprefixer para compatibilidad

Autoprefixer es una herramienta que añade automáticamente los prefijos de proveedores necesarios a tu CSS. Para Grid, puede generar la sintaxis alternativa para IE11:

# Instalación con npm
npm install autoprefixer --save-dev

Configuración en postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')({
      grid: "autoplace"
    })
  ]
}

Esto transformará tu código Grid moderno en código compatible con IE11 cuando sea posible.

Ejemplo práctico: Layout responsivo con fallback

Veamos un ejemplo completo de un layout de galería con detección de soporte:

/* Estilos base para todos los navegadores */
.gallery {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.gallery-item {
  float: left;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.gallery-item img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

/* Responsive para navegadores sin Grid */
@media (min-width: 600px) {
  .gallery-item {
    width: 50%;
  }
}

@media (min-width: 900px) {
  .gallery-item {
    width: 33.33%;
  }
}

/* Versión mejorada con Grid */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px;
    overflow: visible;
  }
  
  .gallery-item {
    width: auto;
    padding: 0;
    float: none;
  }
  
  /* Podemos añadir mejoras adicionales solo para navegadores con Grid */
  .gallery-item:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
  }
}

Este enfoque garantiza que todos los usuarios tengan una experiencia adecuada: los que usan navegadores antiguos verán una galería basada en floats con media queries, mientras que los usuarios de navegadores modernos disfrutarán de un layout más sofisticado con Grid, incluyendo efectos de hover.

Conocer la compatibilidad de CSS Grid y saber cómo implementar alternativas es esencial para crear sitios web robustos que funcionen bien para todos los usuarios, independientemente del navegador que utilicen.