Cuadrícula CSS y formas personalizadas, parte 1

En un artículo anterior, observé la capacidad de CSS Grid para crear diseños complejos utilizando sus poderes de colocación automática. Llevé eso un paso más allá en otro artículo que agregó un efecto de desplazamiento de zoom a las imágenes en un diseño de cuadrícula. Esta vez, quiero sumergirme en otro tipo de cuadrícula, una que funcione con formas.

Por ejemplo, ¿qué pasa si las imágenes no son perfectamente cuadradas sino que tienen forma de hexágonos o rombos? Alerta de spoiler: podemos hacerlo. De hecho, vamos a combinar las técnicas de CSS Grid que hemos visto y añadiremos algo de CSS clip-path y mask ¡magia para crear elegantes cuadrículas de imágenes para casi cualquier forma que puedas imaginar!

Comencemos con algunas marcas

La mayoría de los diseños que vamos a ver pueden parecer fáciles de lograr a primera vista, pero la parte desafiante es lograrlos con el mismo marcado HTML. Podemos usar muchos envoltorios, divs, y otras cosas, pero el objetivo de esta publicación es usar la misma y más pequeña cantidad de código HTML y aún así obtener todas las cuadrículas diferentes que queremos. Después de todo, ¿qué es CSS sino una forma de separar el estilo y el marcado? Nuestro estilo no debe depender del marcado, y viceversa.

Dicho esto, comencemos con esto:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

Un contenedor con imágenes es todo lo que necesitamos aquí. ¡Nada mas!

Cuadrícula CSS de hexágonos

Esto también se conoce a veces como una cuadrícula de "panal".

Ya hay muchas otras publicaciones de blog que muestran cómo hacer esto. Diablos, yo escribió uno aquí en CSS-Tricks! Ese artículo sigue siendo bueno y profundiza en la creación de un diseño receptivo. Pero para este caso específico, vamos a confiar en un enfoque CSS mucho más simple.

Primero, usemos clip-path en las imágenes para crear la forma hexagonal y las colocamos todas en la misma área de cuadrícula para que se superpongan.

.gallery {
  --s: 150px; /* controls the size */
  display: grid;
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Nada lujoso todavía. Todas las imágenes son hexágonos y están una encima de la otra. Entonces parece que todo lo que tenemos es un solo elemento de imagen en forma de hexágono, pero en realidad hay siete.

El siguiente paso es aplicar una traducción a las imágenes para colocarlas correctamente en la cuadrícula.

Tenga en cuenta que todavía queremos que una de las imágenes permanezca en el centro. El resto se colocan a su alrededor usando CSS. translate y buena geometría pasada de moda. Estas son las fórmulas simuladas que se me ocurrieron para cada imagen en la cuadrícula:

translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))

Unos cuantos cálculos y optimización más tarde (salteemos esa parte aburrida, ¿no?) obtenemos el siguiente CSS:

.gallery {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  display: grid;
}
.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
  transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }

Tal vez sea más fácil cuando tengamos funciones trigonométricas reales en CSS!

Cada imagen es traducida por el --_x y --_y variables que se basan en esas fórmulas. Solo la segunda imagen (nth-child(2)) no está definido en ningún selector porque es el del centro. Puede ser cualquier imagen si decide utilizar un orden diferente. Aquí está el orden que estoy usando:

Con solo unas pocas líneas de código, obtenemos una genial cuadrícula de imágenes. A esto, agregué un pequeño efecto de desplazamiento a las imágenes para hacer las cosas más elegantes.

¿Adivina qué? Podemos obtener otra cuadrícula hexagonal simplemente actualizando algunos valores.

Si revisa el código y lo compara con el anterior, notará que simplemente he cambiado los valores dentro clip-path y cambié entre --x y --y. ¡Eso es todo!

Cuadrícula CSS de rombos

Rombo es una palabra elegante para un cuadrado que gira 45 grados.

Mismo HTML, ¿recuerdas? Primero comenzamos definiendo una cuadrícula de imágenes de 2×2 en CSS:

.gallery {
  --s: 150px; /* controls the size */

  display: grid;
  gap: 10px;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  place-items: center;
}
.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  object-fit: cover;
}

Lo primero que te puede llamar la atención es el grid propiedad. Se usa con poca frecuencia, pero es muy útil porque es una forma abreviada que le permite definir una cuadrícula completa en una sola declaración. No es la propiedad más intuitiva, y sin mencionar legible, pero estamos aquí para aprenden y descrubrir cosas nuevas, así que usémoslo en lugar de escribir todas las propiedades individuales de la cuadrícula.

grid: auto-flow var(--s) / repeat(2,var(--s));

/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);

Esto define dos columnas iguales a la --s variable y establece la altura de todas las filas para --s también. Como tenemos cuatro imágenes, obtendremos automáticamente una cuadrícula de 2×2.

Aquí hay otra forma en que podríamos haberlo escrito:

grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));

…que se puede reducir con el grid taquigrafía:

grid: repeat(2,var(--s)) / repeat(2,var(--s));

Después de configurar la cuadrícula, la rotamos y las imágenes con CSS transforms y obtenemos esto:

Observe cómo los giro a ambos por 45deg, pero en sentido contrario.

.gallery {
  /* etc. */
  transform: rotate(45deg);
}
.gallery > img {
  /* etc. */
  transform: rotate(-45deg);
}

Girar las imágenes en dirección negativa evita que giren con la cuadrícula para que permanezcan rectas. Ahora, aplicamos un clip-path para recortar una forma de rombo fuera de ellos.

¡Casi terminamos! Necesitamos rectificar el tamaño de la imagen para que encajen. De lo contrario, están muy separados entre sí hasta el punto en que no parece una cuadrícula de imágenes.

La imagen está dentro de los límites del círculo verde, que es el círculo inscrito del área de la cuadrícula donde se coloca la imagen. Lo que queremos es agrandar la imagen para que quepa dentro del círculo rojo, que es el círculo circunscrito al área de la cuadrícula.

No te preocupes, no introduciré más geometría aburrida. Todo lo que necesitas saber es que la relación entre el radio de cada círculo es la raíz cuadrada de 2 (sqrt(2)). Este es el valor que necesitamos para aumentar el tamaño de nuestras imágenes para llenar el área. Usaremos 100%*sqrt(2) = 141% y listo!

.gallery {
  --s: 150px; /* control the size */

  display: grid;
  grid: auto-flow var(--s) / repeat(2,var(--s));
  gap: 10px;
  place-items: center;
  transform: rotate(45deg);
}
.gallery > img {
  width: 141%; /* 100%*sqrt(2) = 141% */
  aspect-ratio: 1;
  object-fit: cover;
  transform: rotate(-45deg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Al igual que la cuadrícula hexagonal, podemos hacer las cosas más elegantes con ese agradable efecto de desplazamiento del zoom:

Cuadrícula CSS de formas triangulares

Probablemente ya sepas que el gran truco es averiguar el clip-path para obtener las formas que queremos. Para esta cuadrícula, cada elemento tiene su propio clip-path valor mientras que las dos últimas cuadrículas funcionaron con una forma consistente. Entonces, esta vez, es como si estuviéramos trabajando con algunas formas triangulares diferentes que se unen para formar una cuadrícula rectangular de imágenes.

Los colocamos dentro de una cuadrícula de 3×2 con el siguiente CSS:

.gallery {
  display: grid;
  gap: 10px; 
  grid-template-columns: auto auto auto; /* 3 columns */
  place-items: center;
}
.gallery > img {
  width: 200px; /* controls the size */
  aspect-ratio: 1;
  object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }

Esto es lo que obtenemos:

El toque final es hacer que el ancho de la columna central sea igual 0 para deshacerse de los espacios entre las imágenes. El mismo tipo de problema de espaciado que tuvimos con la cuadrícula de rombos, pero con un enfoque diferente para las formas que estamos usando:

grid-template-columns: auto 0 auto;

Tuve que jugar con el clip-path valores para asegurarse de que todos parezcan encajar muy bien como un rompecabezas. Las imágenes originales se superponen cuando la columna del medio tiene un ancho cero, pero después de cortar las imágenes, la ilusión es perfecta:

Cuadrícula de pastel de pizza CSS

¿Adivina qué? Podemos obtener otra cuadrícula genial simplemente agregando border-radius y overflow a nuestra cuadrícula o formas triangulares. 🎉

Cuadrícula CSS de piezas de rompecabezas

Esta vez vamos a jugar con el CSS mask propiedad para hacer que las imágenes parezcan piezas de un rompecabezas.

Si no has usado mask Degradados CSS, Te lo recomiendo mucho este otro articulo Escribí sobre el tema porque ayudará con lo que viene a continuación. ¿Por qué gradientes? Porque eso es lo que estamos usando para obtener las muescas redondas en las formas de las piezas del rompecabezas.

Configurar la cuadrícula debería ser pan comido por ahora, así que concentrémonos en el mask parte.

Como se ilustra en la demostración anterior, necesitamos dos degradados para crear la forma final. Un degradado crea un círculo (la parte verde) y el otro crea la curva derecha mientras rellena la parte superior.

--g: 6px; /* controls the gap */
--r: 42px;  /* control the circular shapes */

background: 
  radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
  radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
  top/100% calc(100% - var(--r)) no-repeat;

Dos variables controlan la forma. los --g La variable no es más que la brecha de la cuadrícula. Necesitamos tener en cuenta el espacio para colocar correctamente nuestros círculos para que se superpongan perfectamente cuando se ensamble todo el rompecabezas. los --r La variable controla el tamaño de las partes circulares de la forma del rompecabezas.

Ahora tomamos el mismo CSS y actualizamos algunos valores para crear las otras tres formas:

Tenemos las formas, pero no los bordes superpuestos que necesitamos para que encajen. Cada imagen está limitada a la celda de la cuadrícula en la que se encuentra, por lo que tiene sentido por qué las formas están desordenadas en este momento:

Necesitamos crear un desbordamiento aumentando el alto/ancho de las imágenes. De la figura anterior, tenemos que aumentar la altura de la primera y la cuarta imagen mientras aumentamos el ancho de la segunda y la tercera. Probablemente ya hayas adivinado que necesitamos aumentarlos usando el --r variable.

.gallery > img:is(:nth-child(1),:nth-child(4)) {
  width: 100%;
  height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
  height: 100%;
  width: calc(100% + var(--r));
}

¡Nos estamos acercando!

Creamos la superposición pero, de forma predeterminada, nuestras imágenes se superponen en la derecha (si aumentamos el ancho) o en la parte inferior (si aumentamos la altura). Pero eso no es lo que queremos para la segunda y cuarta imágenes. La solución es usar place-self: end en esas dos imágenes y nuestro código completo se convierte en esto:

Aquí hay otro ejemplo en el que estoy usando un degradado cónico en lugar de un degradado radial. Esto nos da piezas de rompecabezas triangulares manteniendo el mismo HTML y CSS subyacente.

¡Un último! Esta vez estoy usando clip-path y dado que es una propiedad que podemos animar, obtenemos un desplazamiento genial simplemente actualizando la propiedad personalizada que controla la forma.

Terminando

¡Eso es todo por esta primera parte! Al combinar las cosas que ya aprendimos sobre CSS Grid con algunas clip-path y mask magia, pudimos hacer diseños de cuadrícula con diferentes tipos de formas. ¡Y usamos el mismo marcado HTML cada vez! ¡Y el marcado en sí no es más que un contenedor con un puñado de elementos de imagen!

En la segunda parte, vamos a explorar cuadrículas de aspecto más complejo con formas más elegantes y efectos de desplazamiento.

Estoy planeando tomar la demostración de los paneles de imágenes expandibles que hicimos juntos en este otro articulo:

…¡y transfórmalo en paneles de imágenes en zig-zag! Y este es solo un ejemplo entre los muchos que descubriremos en el próximo artículo.