Hacer grid de contenido horizontal con scroll, css

grid-horizontal.jpg

Para ciertos contenidos es necesario crear cuadrículas (grid scroll) con deslizamiento horizontal, más útil en mobile que en escritorio... para ahorrar espacio hacia abajo y para mostrar más contenido relacionado en un mismo lugar. Sea cual sea el propósito, aquí describimos como sería: 

Crear un contenedor con la definición de la cuadrícula:

div.galerias {
display:grid;
grid-template-rows: repeat(auto-fill,minmax(10rem,1fr));
grid-auto-flow: column;
overflow-x: auto;
grid-gap:2rem;
grid-auto-columns: minmax(24rem,1fr);
}

En este caso es una clase llamada galerias que sería el contenedor, luego cada elemento dentro sería el contenido... así tal cual no importa cuantos elementos estén, los metería y se permitiría el scroll horizontal. En mi caso como son fotos, defino el tamaño de cada FIGURE para que se distribuya adecuadamente.

div.galerias figure {
height:20rem;margin-bottom:.5rem;
}

Y eso es todo, será cosa de jugar con los tamaños para amoldarlo a nuestras necesidades. Dejo aquí un ejemplo de grid con deslizamiento horizontal.

grid-horizontal-scroll.jpg

+ fotos / videos

https://panchito-kardashian.tar.mx/media/2021/09/grid-horizontal.jpg

Almacenado en css grid, Desarrollo Web

por Jorge Martínez Mauricio :)

blog / fotos / archivo

Hacer grid de contenido horizontal con scroll, css

tar.mx es un blog sobre fotografía, tecnología y otras chunches

modificado jueves 2 de septiembre de 2021, 14:49

cuentame