CSS grid para galerías de fotos HTML

Aún recuerdo cuando nuestros antepasados usaban tablas HTML para generar cualquier cosa en un sitio web. Ciertamente que la tablas fueron un avance increíble en el cómputo en general, pero para desplegar información en pantallas de pronto no son tan útiles o fáciles de visualizar. 

Luego hubo una época en que se dijo ¡no más tablas! y empezamos a abusar de DIV y divs con propiedades como float y casi nunca era sencillo de maquetar un sitio así. Mantenerlo, menos.

Desde hace un par de años nacieron los grid, una propiedad maravillosa en css que permite acomodar elementos en una página de forma muy fácil y cómoda, lo más complicado es entender un poco como funciona, pero básicamente es una rejilla como tabla, donde sin importar como pongas los datos, puedes mover las celdas de tamaño, posición, etcétera. Sin JavaScript, css puro.

Cuando haces un grid, al inspeccionar el elemento (pulsar F12, seleccionar el grid) nos aparece de una forma gráfica y bonita de como está dividido. En el ejemplo tengo definidas 4 columnas solamente, así que pueden ser las filas que sea, como contenido vaya a poner. También se puede forzar a un número determinado de filas y columnas, luego cada celda puede ser establecida donde inicia, donde termina, cuanto espacio ocupa... maravilloso.

El ejemplo de CSS grid para galerías está aquí, tiene algunos efectos con las mismas fotografías, así que si... depende como se vea la galería, puede ser mas atractiva o no.

Estos días estoy muy emocionado con display:grid ;-). Mismas fotos, diferente resultado.

+ fotos / videos

Almacenado en css, css grid, Desarrollo Web

por Jorge Martínez Mauricio :)

blog / fotos / archivo

CSS grid para galerías de fotos HTML

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

modificado viernes 27 de agosto de 2021, 15:09