Un nuevo layout implementado con CSS Subgrid

• CSS Subgrid es una función que va más allá de las limitaciones del Grid tradicional y permite extender la estructura del grid padre hasta los elementos DOM hijos
• Antes, solo los hijos directos podían participar en el grid, pero con subgrid incluso estructuras anidadas como <ul> y <li> pueden colocarse dentro de las mismas celdas del grid
• Resuelve el desbalance entre elementos hermanos causado por diferencias en la longitud del contenido y permite construir layouts donde cada tarjeta o sección responde dinámicamente
• Aun así, hay puntos a considerar como el problema de reserva de filas, la renumeración de líneas y la incompatibilidad con grids fluidos basados en auto-fill
• Ya tiene soporte en los principales navegadores y puede adoptarse de forma progresiva, por lo que es una tecnología que puede aumentar mucho la flexibilidad del diseño de UI a futuro

---

Conceptos básicos de Subgrid

• En las primeras versiones de CSS Grid, solo los elementos hijos directos podían participar en el layout
  • Por ejemplo, en una UI de portafolio, las imágenes de los <li> dentro de un <ul> quedan agrupadas por defecto en una sola celda
• Con grid-template-rows: subgrid y grid-template-columns: subgrid, se heredan las definiciones de filas y columnas del grid padre
  • Así, cada <li> puede colocarse directamente en las celdas del grid padre, manteniendo al mismo tiempo la estructura semántica de HTML y la alineación visual
• El mismo resultado puede lograrse con Flexbox y grids anidados, pero subgrid ofrece una solución más simple al compartir una sola estructura de grid

Nuevas posibilidades de layout

• En el ejemplo de tarjetas de portafolio, cada <article> tiene un grid de dos columnas para acomodar la imagen y el texto
  • La unidad fr es flexible, pero como cada tarjeta hace su propio cálculo, se produce un desbalance en el ancho de las columnas
• Al aplicar grid-template-columns: subgrid, todas las tarjetas comparten la proporción de columnas del grid padre
  • El grid completo se reajusta automáticamente según los cambios de contenido, como la longitud de los títulos
• De esta forma es posible implementar un layout con reconocimiento mutuo entre elementos hermanos
  • Ejemplo: si se acorta el título “Infinite Supercomputer”, la proporción imagen-texto de todas las tarjetas se ajusta de inmediato

Puntos a tener en cuenta al usar Subgrid (Gotchas)

Reserva de espacio en filas

• Compartir columnas es intuitivo, pero al compartir filas se necesita una reserva explícita de filas
  • Por ejemplo, en una tarjeta de precios, para que los elementos de cada <ul> se alineen en la misma fila, hay que indicar la cantidad de filas con grid-row: span N
• Por defecto, subgrid ocupa solo una celda, así que si se van a usar varias filas primero hay que expandir el área del grid padre

Numeración en grids anidados

• Subgrid hereda la plantilla de filas y columnas del padre, pero la numeración de líneas se reinicia
  • Por ejemplo, aunque herede las líneas 2 a 5 del padre, internamente vuelven a numerarse como 1 a 4
  • Como cada grid tiene su propio índice, los números de línea no funcionan como IDs únicos, sino como índices relativos

Incompatibilidad con grids fluidos

• Un fluid grid con la forma repeat(auto-fill, minmax()) no puede usarse junto con subgrid
  • Subgrid necesita una cantidad de columnas definida, y no admite auto-fill ni auto-fit
  • El autor indica explícitamente que no encontró una solución para esa combinación

Soporte en navegadores antiguos

• Está soportado en los navegadores principales desde 2023, pero la tasa de soporte sigue por debajo del 90%
• Se puede ofrecer un layout alternativo con la condición @supports not (grid-template-columns: subgrid)
  • Por ejemplo, se propone un fallback donde imagen y texto se acomodan en una pila vertical

Casos reales y conclusión

• El sitio para desarrolladores de Stripe (stripe.dev) construye toda la página como un gran grid y logra una disposición detallada mediante varias capas de subgrid
• Subgrid no solo sirve para layouts grandes, sino también para ajustes pequeños de UI
• Puede incorporarse de forma progresiva sin necesidad de reestructurar todo el proyecto
• Es una herramienta que aporta nueva flexibilidad a los layouts en CSS y vale la pena explorarla de forma experimental

[GN⁺]

Comentarios en Hacker News

• La función de subgrid está muy buena, pero en el primer ejemplo sencillo también se podría usar ul { display: contents } para que los hijos participen en el layout de grid
  Si no necesitas subgrid necesariamente, esta forma es más eficiente

  • En ese ejemplo sí, pero en general display: contents elimina por completo el elemento UL del layout
    Así que no puedes aplicarle estilos ni hacer que ese elemento reciba eventos de UI
    Si quieres usar el UL como área resaltada o sección con scroll, subgrid es mucho más útil
  • En el segundo ejemplo, para mantener constante el ancho de la imagen, bastaría usar otra unidad en vez de fr, y usar fr para el texto para que ocupe el espacio restante

• Hace tiempo sufrí muchísimo por no tener subgrid cuando armé una UI de comparación de precios
  Era imposible poner dos tablas una al lado de la otra y alinear las filas
  Se podía resolver con altura fija o cálculos en JS, pero dentro de una estructura de componentes de React era demasiado ineficiente

• Pensé que container queries serían una mejor solución
  Pero para mantener la consistencia de todo el grid, subgrid puede ser más adecuado
  Como referencia, el ejemplo en CodePen ayuda a entenderlo rápido

  • Container queries no resuelven el problema de reaccionar al tamaño de elementos hermanos
    Además, usar un container crea un nuevo stacking context, lo cual es incómodo
    Es una lástima que no se puedan usar subgrid y container juntos. Si los hijos pudieran referenciar el tamaño del subgrid, sería realmente potente

• Me da la impresión de que “¿al final volvimos al layout con <table>?”

  • Sí y no. Los viejos <table> eran un hack para resolver problemas, pero tenían muchas limitaciones técnicas y de accesibilidad
    El sistema Grid es una herramienta para la disposición visual, no una tabla para representar estructura de datos
    Ahora que grid ya está establecido como estándar, ojalá dejemos de compararlo con tablas
  • Hace 25 años el servidor renderizaba tablas automáticamente para crear layouts, y en ese entonces realmente funcionaba fácil
    Pero no se pensaba en responsividad ni accesibilidad. Al final terminamos reinventando las tablas
  • El problema de <table> era que era una estructura para describir contenido. El grid en sí no tiene nada de malo
  • Yo también llevo más de 20 años escuchando que “las tablas son para datos tabulares”
    Al final, CSS volvió a implementar esa funcionalidad de una forma mejorada

• Uno de los bugs de grid que vi antes era que, si a un elemento <img> se le asignaba tamaño en porcentaje, el tamaño de la celda se deformaba según el tamaño original de la imagen
  Pasaba tanto en Firefox como en Chromium, y el bug relacionado está en Mozilla Bug 1857365

  • Me pregunto si este problema desaparece al darle atributos fijos de width/height a la imagen

• Es una pena que CSS a veces requiera agregar información de estructura del documento para el layout
  Por ejemplo, el hecho de tener que especificar la cantidad de filas

  • Idealmente, estaría bueno tener una forma de alinear elementos aunque tengan padres distintos
    O que un contenedor flex pudiera imitar la distribución de otro contenedor
    Pero probablemente eso haría más compleja la DX

• Me preguntaba por qué en el ejemplo de código había estilos tanto en el archivo HTML como en el CSS
  Viendo solo el CSS del primer ejemplo de subgrid, me tardé bastante en encontrar qué estilos se le aplicaban al UL

• Me da la impresión de que “¿al final volvimos otra vez a grid?”
  En la época del HTML de antes también hacíamos algo parecido

  • Pero el grid actual hace mucho más fácil el diseño responsivo
  • Claro, aunque ahora también tiene el efecto secundario de que aparecen más bugs mientras das estilo 😅

• Los posts del blog de Josh siempre impresionan
  La claridad de la escritura, el ojo para el diseño y hasta el sitio web interactivo, todo es excelente

  • Yo también estoy suscrito a su lista de correo. Siempre espero con ganas cada nuevo post

• Personalmente, grid todavía me resulta incómodo de manejar
  La sintaxis se siente rara y tampoco conecto bien con su lógica de layout. Flexbox me parece mucho más intuitivo y flexible

  • Las dos tecnologías abordan los problemas de forma distinta
    Flexbox controla el tamaño centrado en el contenido, mientras que Grid lo hace centrado en el contenedor
  • Yo también vuelvo a probar grid de vez en cuando, pero todavía siento que le faltan funciones que quiero
    El contenido no se ajusta automáticamente en varios ejes, y hay que posicionarlo todo manualmente
    Quizás no entendí bien la esencia de grid, o tal vez simplemente no encaja con el tipo de trabajo que hago
  • Incluso al hacer diseño responsivo, flexbox me parece mucho más simple que grid