Construyendo una cuadrícula hexagonal usando una cuadrícula CSS

Pienso en las cuadrículas como disposiciones de rectángulos con líneas verticales y horizontales atravesándolas. Y lo son, pero eso no significa que todavía no podamos hacer cosas inteligentes sobre cómo colocamos las cosas en esas cuadrículas y qué hacemos con los elementos después.

En esta demostración de Jesse Breneman, se crea una cuadrícula de hexágonos configurando las columnas de la cuadrícula con matemáticas de modo que cada bloque pueda abarcar tres columnas y dos filas, de modo que los bloques se superpongan de una manera que permita clip-pathaplicar una alrededor de ellos. Esto talla un bloque en un hexágono que está espaciado uniformemente con los demás. Muy inteligente.

Y ja, ese es un nombre de dominio increíble, Jesse. Personalmente, no sé nada sobre blogs sobre CSS en un nombre de dominio súper cursi.

Enlace directo →