Grid Workshop

Laboratorio de componentes CSS de grid y scroll. Cuatro demos interactivas que exploran cards con stretch-link, estanterías horizontales tipo streaming y alineación con subgrid.

Ver demos
Card Card de producto Card semántica de comic con stretch-link, favoritos y carrito. Enlace que cubre toda la card y botones por encima. Abrir demo → Scroll Streaming scroll Estantería horizontal al estilo streaming con scroll-snap, flechas, teclado y contador de posición. Abrir demo → Scroll Scroll horizontal de productos Cards de producto en fila scrolleable con scroll-snap, flechas y dots de posición. Abrir demo → Subgrid Alineación con subgrid CSS subgrid para alinear títulos, metadatos y footers de cards con contenido de altura variable. Abrir demo →

Sobre las técnicas utilizadas

Los cuatro ejemplos comparten un mismo enfoque: componentes de layout que resuelven un problema real, con HTML semántico, CSS que degrada con gracia y controles que no dependen del ratón. No son trucos: son patrones que se sostienen solos en producción.

Qué se explora

Enlace que cubre la card — el stretch link agranda el área de clic sin anidar enlaces, manteniendo HTML válido y un único destino por card.
Scroll horizontal con snap — carruseles y estanterías que encastran items, con navegación por flechas, teclado y más de un indicador de posición.
Alineación con subgrid — cards de contenido variable cuyos títulos, metadatos y footers comparten las mismas líneas horizontales.

Qué técnicas se usaron

position:absolute; inset:0 para el enlace de área completa, con botones en z-index superior que capturan su propio clic.
scroll-snap-type y scroll-snap-align para encastrar items en contenedores con overflow-x.
display:grid con grid-auto-flow:column y grid-auto-columns para filas con ancho fijo.
grid-template-rows:subgrid para delegar la fila de cada card en su grid padre.
min-width:0 en contenedores flex/grid anidados para que un track con overflow pueda encogerse y scrollearse internamente.

La mirada sobre accesibilidad

Semántica — article, section, list/listitem y h ordenados; el footer va fuera de main.
Estados comunicados — aria-pressed en toggles, aria-live en contadores, aria-label descriptivos en botones iconográficos.
Teclado — los tracks son focables (tabindex) y responden a ←/→; no hay interacción que exija solo el ratón.
Movimiento reducido — prefers-reduced-motion cambia el scroll suave por salto directo; no hay animaciones que no se puedan desactivar.