Secciones expandibles dentro de una cuadrícula CSS

Me encanta CSS Grid. Me encanta cómo, con solo unas pocas líneas de código, podemos lograr diseños de cuadrícula totalmente receptivos, a menudo sin ninguna consulta de medios. Me siento bastante cómodo manejando CSS Grid para producir diseños interesantes, mientras mantengo el marcado HTML limpio y simple.

Pero recientemente, se me presentó un enigma de interfaz de usuario único que resolver. Esencialmente, cualquier celda de la cuadrícula dada podría tener un botón que abriría otra área más grande que también es parte de la cuadrícula. Pero esta nueva celda de cuadrícula más grande tenía que ser:

1. justo debajo de la celda que lo abrió, y
2. ancho completo.

Resulta que hay una buena solución y, en el espíritu de CSS Grid, solo involucra un par de líneas de código. En este artículo, combinaré tres “trucos” de CSS Grid de una línea para resolver esto. No se necesita JavaScript en absoluto.

Una explicación del problema real que necesito resolver.

Aquí hay un ejemplo de interfaz de usuario minimalista de lo que tenía que hacer:

Esta es nuestra cuadrícula de tarjetas de producto real, como se muestra en nuestra biblioteca de componentes de Storybook:

Cada tarjeta de producto necesitaba un nuevo botón de «vista rápida» agregado de modo que, al hacer clic, hiciera lo siguiente:

• «inyectar» dinámicamente una nueva tarjeta de ancho completo (que contiene información más detallada del producto) inmediatamente debajo de la tarjeta de producto en la que se hizo clic,
• sin interrumpir la cuadrícula de tarjetas existente (es decir, conservar el orden de origen DOM y el orden visual de las tarjetas renderizadas en el navegador), y
• seguir siendo plenamente receptivo.

Hmmm … ¿era esto posible incluso con nuestra implementación actual de CSS Grid?

Seguramente necesitaría recurrir a JavaScript para volver a calcular las posiciones de las tarjetas y moverlas, especialmente al cambiar el tamaño del navegador. ¿Derecha?

Google no era mi amigo. No pude encontrar nada que me ayudara. Incluso una búsqueda de implementaciones de «vista rápida» solo dio como resultado ejemplos que usaban modales o superposiciones para representar la tarjeta inyectada. Después de todo, un modal suele ser la única opción en situaciones como esta, ya que enfoca al usuario en el nuevo contenido, sin necesidad de interrumpir el resto de la página.

Dormí sobre el problema y finalmente llegué a una solución viable combinando algunas de las características más poderosas y útiles de CSS Grid.

Truco de cuadrícula CSS n. ° 1

Ya estaba empleando el primer truco para nuestro sistema de cuadrícula predeterminado, y la cuadrícula de la tarjeta de producto es una instancia específica de ese enfoque. Aquí hay un código (simplificado):

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, 20rem);
}

los «salsa secreta» en este código es el grid-template-columns: repeat(auto-fit, 20rem); que nos da una cuadrícula con columnas (20rem de ancho en este ejemplo) que se organizan automáticamente en el espacio disponible, pasando a la siguiente fila cuando no hay suficiente espacio.

Curioso sobre auto-fit vs auto-fill? Sara Soueidan ha escrito una maravillosa explicación de cómo funciona esto. Sara también explica cómo puedes incorporar minmax() para permitir que los anchos de columna se «flexionen» pero, para los propósitos de este artículo, quería definir anchos de columna fijos para simplificar.

Truco de cuadrícula CSS n. ° 2

A continuación, tuve que acomodar una nueva tarjeta de ancho completo en la cuadrícula:

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

Este código funciona porque grid-template-columns en el truco n. ° 1 crea una cuadrícula «explícita», por lo que es posible definir columnas de inicio y fin para el .fullwidth tarjeta, donde 1 / -1 significa «comenzar en la columna 1 y abarcar todas las columnas hasta la última».

Excelente. Una tarjeta de ancho completo inyectada en la cuadrícula. Pero … ahora tenemos espacios por encima de la tarjeta de ancho completo.

Truco de cuadrícula CSS n. ° 3

Llenar los huecos: he hecho esto antes con un enfoque de mampostería falsa:

.grid {
  grid-auto-flow: dense;
}

¡Eso es todo! Diseño requerido logrado.

los grid-auto-flow controla cómo funciona el algoritmo de colocación automática de la cuadrícula CSS. En este caso, el dense El algoritmo de empaquetado intenta rellenar los huecos antes en la cuadrícula.

• Todas nuestras columnas de cuadrícula son las mismo ancho. El empaque denso también funciona si los anchos de columna son flexibles, por ejemplo, usando minmax(20rem, 1f).
• Todas nuestras «celdas» de la cuadrícula son las misma altura en cada fila. Este es el comportamiento predeterminado de la cuadrícula CSS. El contenedor de cuadrícula tiene implícitamente align-items: stretch haciendo que las celdas ocupen el 100% de la altura de fila disponible.

El resultado de todo esto es que los agujeros en nuestra cuadrícula se llenan, y lo hermoso es que el orden de origen original se conserva en la salida renderizada. Esto es importante desde la perspectiva de la accesibilidad.

Consulte MDN para obtener una explicación completa de cómo funciona la colocación automática de CSS Grid.

La solucion completa

Estos tres trucos combinados proporcionan una solución de diseño simple que requiere muy poco CSS. Sin consultas de medios y sin necesidad de JavaScript.

Pero … ¿todavía necesitamos JavaScript?

Sí. Pero no para los cálculos de diseño. Es puramente funcional para gestionar los eventos de clic, el estado de enfoque, la visualización de la tarjeta inyectada, etc.

Para fines de demostración en el prototipo, las tarjetas de ancho completo se han codificado en el HTML en sus ubicaciones correctas en el DOM, y JavaScript simplemente alterna sus propiedades de visualización.

Sin embargo, en un entorno de producción, la tarjeta inyectada probablemente se buscaría con JavaScript y se colocaría en la ubicación correcta. Los diseños de cuadrícula para algo como productos en un sitio de comercio electrónico tienden a tener DOM muy pesados, y queremos evitar aumentar innecesariamente el peso de la página con una gran cantidad de contenido «oculto» adicional.

Las vistas rápidas deben considerarse como una mejora progresiva, por lo que si JavaScript no se carga, simplemente se lleva al usuario a la página de detalles del producto correspondiente.

Consideraciones de accesibilidad

Me apasiona usar el marcado HTML semántico correcto, agregando aria- propiedades cuando sea absolutamente necesario, y garantizar que la interfaz de usuario funcione solo con un teclado y con un lector de pantalla.

Entonces, aquí hay un resumen de las consideraciones que se tomaron para hacer que este patrón sea lo más accesible posible:

• La cuadrícula de la tarjeta de producto utiliza un <ul><li> construir porque estamos mostrando una lista de productos. Por lo tanto, las tecnologías de asistencia (por ejemplo, lectores de pantalla) comprenderán que existe una relación entre las tarjetas y se informará a los usuarios cuántos elementos hay en la lista.
• Las propias tarjetas de producto son <article> elementos, con títulos adecuados, etc.
• El orden de origen HTML se conserva para las tarjetas cuando el .fullwidth se inyecta la tarjeta, lo que proporciona un buen orden de tabulación natural en el contenido inyectado, y vuelve a salir a la siguiente tarjeta.
• Toda la cuadrícula de la tarjeta está envuelta en un aria-live región para que los cambios de DOM se anuncien a los lectores de pantalla.
• La gestión del enfoque garantiza que la tarjeta inyectada reciba el enfoque del teclado y, al cerrar la tarjeta, el enfoque del teclado se devuelve al botón que activó originalmente la visibilidad de la tarjeta.

Aunque no se demuestra en el prototipo, estas mejoras adicionales podrían agregarse a cualquier implementación de producción:

• Asegúrese de que la tarjeta inyectada, cuando esté enfocada, tenga una etiqueta adecuada. Esto podría ser tan simple como tener un encabezado como primer elemento dentro del contenido.
• Unir el ESC tecla para cerrar la tarjeta inyectada.
• Desplácese por la ventana del navegador para que la tarjeta inyectada sea completamente visible dentro de la ventana gráfica.

Terminando

¿Entonces, qué piensas?

Esta podría ser una buena alternativa a los modales cuando queremos revelar contenido adicional, pero sin secuestrar toda la ventana gráfica en el proceso. Esto también puede ser interesante en otras situaciones: piense en las leyendas de las fotos en una cuadrícula de imágenes, texto auxiliar, etc. Incluso podría ser una alternativa a algunos casos en los que normalmente buscaríamos <details>/<summary> (como sabemos, estos solo se usan mejor en ciertos contextos).