Las galerías de imágenes creadas por sitios web como Unsplash, Pinterest, etc. se crean mediante técnicas como posicionar o traducir el elemento de la imagen, lo cual es una tarea muy engorrosa. Puede lograr la misma funcionalidad muy rápidamente utilizando CSS Grids.
Por ejemplo: Arriba hay una galería de imágenes con imágenes de diferentes anchos y altos, que es un caso de uso perfecto para las cuadrículas CSS.¡Empecemos!
La cuadrícula subyacente
Ahora, creemos una cuadrícula de 8x8 . Podemos crear una cuadrícula de otros tamaños también, pero eso depende del tipo de galería que desee. En nuestro caso, una cuadrícula de 8x8 será ideal.
- Un contenedor de cuadrícula se define estableciendo la propiedad de visualización de un elemento en la cuadrícula . Entonces, el div , con la clase grid, será nuestro contenedor de grid .
- Usamos la propiedad grid-template- column para configurar las pistas de las columnas y grid-template-rows para configurar las pistas de las filas. Declaramos estas propiedades en el contenedor de la cuadrícula. En nuestro ejemplo, haremos un contenedor de cuadrícula de 8x8.
- grid-gap: define el tamaño del espacio entre filas y columnas en un diseño de cuadrícula. El valor del espacio de la cuadrícula puede ser cualquier unidad de longitud CSS. En nuestro ejemplo, he dado el valor de 15px para que nuestra cuadrícula se vea mejor .
HTML:
CSS:
.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
Nota:
Todos los hijos directos de la cuadrícula se convierten automáticamente en elementos de la cuadrícula .
Insertar elementos de cuadrícula
Ahora, insertaremos los elementos de la cuadrícula dentro del contenedor de la cuadrícula:
Estilo de imágenes
.gallery__img { width: 100%; height: 100%; object-fit: cover; }Establecer el valor de ajuste del objeto para cubrir es como establecer el tamaño de fondo para cubrir la imagen de fondo . Estamos haciendo esto para que la imagen pueda llenar la altura y el ancho de su cuadro (el elemento de la cuadrícula), manteniendo su relación de aspecto.
Nota: La propiedad de ajuste del objeto solo funciona si configuramos las propiedades de ancho y alto .
Nota:
De forma predeterminada, los elementos de la cuadrícula se distribuyen de acuerdo con las reglas de colocación automática de la cuadrícula .
Colocación de elementos de cuadrícula
Antes de comenzar a colocar los elementos de la cuadrícula, estudiaremos algunos conceptos básicos.
La cuadrícula div es el contenedor de la cuadrícula y todos los elementos secundarios directos son los elementos de la cuadrícula . Cuando definimos las pistas de la cuadrícula con columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula , la cuadrícula nos proporcionó líneas numeradas llamadas líneas de cuadrícula para usar para colocar los elementos. Puede hacer referencia a cada línea de la cuadrícula mediante un índice numérico.
Las columnas comienzan en uno , de izquierda a derecha de forma predeterminada, y las filas también comienzan en uno de arriba a abajo . Se necesitan dos líneas de cuadrícula para hacer una sola columna o fila, una línea a cada lado, por lo que nuestra cuadrícula de 8 columnas y 8 filas consta de
Líneas de 9 columnas y líneas de 9 filas .
Las líneas verticales 1 y 2 determinan los puntos inicial y final de la primera columna. Líneas 2 y 3 la segunda columna y así sucesivamente. De manera similar, las líneas horizontales 1 y 2 determinan la posición de la primera fila , y las líneas 2 y 3 la segunda fila y así sucesivamente. Conocer los conceptos anteriores le ayudará a comprender cómo vamos a colocar los elementos (imágenes) en nuestra cuadrícula.
Ahora, usaremos los números de línea de la cuadrícula para controlar cómo se colocan los elementos aplicando propiedades directamente a un elemento de la cuadrícula. Podemos especificar en qué línea comienza y termina un elemento de la cuadrícula , y cuántas pistas debe expandirse .
1er elemento de la cuadrícula
Así que creemos una nueva regla que apunte al primer elemento de la cuadrícula. Primero usaremos la propiedad grid-column-start para indicar la línea de la cuadrícula de la columna donde comienza el primer elemento de la cuadrícula. El fin de la columna de la cuadrícula indica dónde termina el primer elemento de la cuadrícula.
Entonces, el valor de inicio de la columna de la cuadrícula es un número que indica la línea de la cuadrícula en el borde izquierdo de una columna. El valor de fin de columna de cuadrícula indica la línea de cuadrícula que marca el borde derecho de la columna.
Entonces, en el ejemplo que se muestra a continuación, establecer grid-column-start en 1 y grid-column-end en 3 significa que el elemento de la cuadrícula se extenderá desde el borde izquierdo de la línea de la cuadrícula, de la línea 1 a la línea 3 , llenando 2 columnas . También usaremos las propiedades grid-row-start y grid-row-end para indicar la posición inicial y final del elemento de la cuadrícula en las líneas de la cuadrícula de la misma manera que lo hicimos para la columna.
.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
Nota:
Ahora, colocaremos otros elementos en los mismos principios que aprendimos anteriormente.
Segundo elemento de la cuadrícula
.gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; }
Tercer elemento de la cuadrícula
.gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; }
Cuarto elemento de la cuadrícula
.gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; }
Artículo de la quinta cuadrícula
.gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; }
Artículo de la sexta cuadrícula
.gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; }
You can find the complete code below.
CSS Grids Gallery And the CSS:
*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: "Nunito", sans-serif; color: #333; font-weight: 300; line-height: 1.6; } .container { width: 60%; margin: 2rem auto; } .gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 1.5rem; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 1 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 3 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 5 / span 4; grid-row: 1 / span 5; */ } .gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 3 / span 3; */ } .gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 6 / span 3; */ } .gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 5 / span 4; */ /* grid-row: 6 / span 3; */ }You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.
You can learn more about the CSS Grids in the link given below
A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com
I hope you’ve found this post informative and helpful. I would love to hear your feedback!
Thank you for reading!