Auto hexagonal CSS Grid Layout V3 en panal 25.9.17

Auto hexagonal CSS Grid Layout V3 en panal

Una vuelta de tuerca a las dos demos anteriores de construcción y colocación de hexágonos con el uso de CSS Grid Layout. Las dos versiones anteriores las pueden ver en el artículo Auto Hexagonal CSS Grid Layout & CSS custom properties

Las diferencias más notorias de éste frente a los anteriores no son tantas aunque sí implican una forma diferente de planteamiento tanto en el tamaño de cada hexágono como en la base para su ubicación con el fin de formar el panal.

Tamaño del hexágono

Las CSS custom properties principales son las destinadas a crear el hexágono:

:root { --gap: 2vmin; --radio: calc(100vmin / 3); --width: calc(var(--radio) * .866); --height: var(--radio); }

En esta ocasión y para evitar desbordar el viewport su tamaño está en función del valor vmin. Esto es, el lado menor (ancho o alto) del viewport.

--radio: calc(100vmin / 3) porque el número máximo de hexágonos por línea será de tres el tamaño del círculo en el que se inscribe cada hexágono debe ser 1/3 de él.

Construyendo el Grid Layout

section { display: grid; max-width: 100vmin; grid-template-columns: repeat(6, 1fr); grid-gap: 2vmin; padding-left: 2vmin; margin: .5rem auto; }

grid-template-columns: repeat(6, 1fr); El Grid layout en este caso consta de 6 columnas. La razón: como voy a situar tres hexágonos por fila colocaré cada uno ocupando 2 columnas. Así que necesito 6. Esto facilitará más adelante formar el panal.

Recortando los ítems con forma de hexágono

article { width: var(--width); height: var(--height); clip-path: url(#hexa-v); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

Este paso no tiene mayor secreto. Así que pasamos al siguiente punto.

Conformando el panal

Esto requiere dos pasos o desplazamientos de los ítems para que su distribución conforme el panal deseado.

Primer paso: en la horizontal

En primer lugar colocar cada ítem del grid (en la demo cada article en su área correspondiente. En esta demo lo hago en base a las líneas creadas de forma automática al usar la declaración grid-template-columns: repeat(6, 1fr) para crear el grid.

article:nth-of-type(1) { grid-column: 2 / span 2; grid-row: 1; } article:nth-of-type(2) { grid-column: 4 / span 2; grid-row: 1; } article:nth-of-type(3) { grid-column: 1 / span 2; grid-row: 2; } article:nth-of-type(4) { grid-column: 3 / span 2; grid-row: 2; } article:nth-of-type(5) { grid-column: 5 / span 2; grid-row: 2; } article:nth-of-type(6) { grid-column: 2 / span 2; grid-row: 3; } article:nth-of-type(7) { grid-column: 4 / span 2; grid-row: 3; }

Recuerda que la distancia entre líneas verticales es igual a la mitad de cada hexágono. Por eso creé antes seis columnas.

grid-column: 2 / span 2; El primer número indica la línea de referencia para ubicar cada hexágono y cada uno se extiende para ocupar dos columnas / span 2; a partir de la línea indicada.

El primer ítem se coloca a partir de la línea nº 2. Así ya queda desplazado en la horizontal la medida exacta para formar el panal.

grid-row: 1 Inicialmente no creamos filas. Van a ser generadas a medida que el número de ítems (hexágonos) aparezcan el el DOM. Lo que hago con la propiedad grid-row es colocarlos en la fila 1, 2 ó 3 según lo que convenga.

Segundo paso: en la vertical

Ahora toca mover lo justo las filas de hexágonos para terminar de conformar un panal como se ha de ver.

article:nth-of-type(-n+2) { margin-bottom: calc(var(--height) * -.2); } article:nth-of-type(n+6):nth-of-type(-n+7) { margin-top: calc(var(--height) * -.2); }

Con la primera regla logramos el ajuste de los ítems de la primera fila (hexágonos 1 y 2) haciendo que suban los de la segunda (los hexágonos 3, 4 y 5) por el margen negativo.

Y con la segunda subimos los ítems de la tercera fila (ítems 6 y 7).

Sin demo, dragones en el garaje

El resto de los estilos es a efectos ornamentales. Sólo para que se vean un poco mejor.

El efecto de todo ello junto lo puedes ver en el siguiente pen de ejemplo:

See the Pen Auto Honeycomb CSS Grid Layout by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso