soy Kseso y esto EsCSS

Auto Hexagonal CSS Grid Layout & CSS custom properties

Un juego y divertimento CSS para ver la potencia al usar conjuntamente varias novedades CSS como el Grid Layout, Custom Properties y otras.

Auto Hexagonal CSS Grid Layout & CSS custom properties

·Por Kseso ✎ 4
Auto Hexagonal CSS Grid Layout & CSS custom properties

Todo lo que sigue, demo incluida, es sólo un mero divertimento. Un juego para ver la potencia de CSS sin necesidad de recurrir a otros lenguajes o herramientas para conseguir algo algo tan visto como un panal de ricos hexágonos.

El auto del título se refiere a que todo está en función del valor de la CSS custom property --Nhexa: elegir cuántos hexágonos se colocan en cada fila.

El resto todo cambia junto a ella, pues es la base para otras custom properties.

Conviene que Nhexa sea un número par. Ya sabes, múltiplo de 2. La razón es que desplazo los hexágonos pares con el selector :nth-child(2n) y que la dimensiones del elemento que crea el grid y su número de columnas y su anchuras están definidas para ello.

A continuación la demo. Y después de ellas un par de apuntes (o pequeñas inconsistencias). Pues esta vez no entraré a explicar los códigos.

Si quieres o necesitas explicación de alguno haz uso de los comentarios. Y no te olvides de disfrutar con la versión 3 de: Auto hexagonal CSS Grid Layout V3 en panal

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

1º: los hexágonos no acaban de ser perfectos. Así como el gap entre ellas en todas las circunstancias. La razón: la relación entre sus lados y el radio de la circunferencia en la que están inscritos no es exacta.
2º: Hay algo de código basura. Especialmente el de las propiedades clip-path y shape-outside que he dejado sin borrar para un intento próximo de hacer que el texto aparezca con los laterales oblicluos. Ver el post CSS shape-outside: y el texto sigue el contorno
3º: Alguna otra cosilla que con las prisas me he olvidado.

Disfruta y mejora de este juego CSS

Auto Hexagonal CSS Grid Layout V2

Por seguir explorando un poco más este tipo de realizaciones, aquí una segunda versión. Las principales diferencias respecto a la primera son:

  • El hexágono está construido un poco mejor teniendo en cuenta la relación entre el radio de la circunferencia en la que se inscribe y la longitud de sus lados:

    --radio: calc(calc(100vw / var(--Nhexa)) - var(--gap)); --width: calc(var(--radio) * .866); --height: var(--radio);

  • Los hexágonos en viewports mayores de 601px se asientan sobre su vértice y en menores sobre un lado. La transición está animada.
  • Tanto las customproperties, como la recolocaión de los hexágonos (vía márgenes) para formar el panal y los valores de clip-path ahora están en su @media query correspondiente.

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

Aunque en el título incluyo la palabra auto realmente no está automatizado 100%. Especialmente en esta 2ª versión que en viewports mayores de 601px. Por la orientación de los hexágonos hay que recurrir a una lista de selectores para crear rangos y actuar en las filas pares e impares por separado

article:nth-child(4n), article:nth-child(4n - 1), article:nth-child(4n - 2), article:nth-child(4n - 3) { } article:nth-child(8n), article:nth-child(8n - 1), article:nth-child(8n - 2), article:nth-child(8n - 3) { }

Esto, como dejo entrever en el comentario 1.1, es imposible automatizar con puro CSS. La razón: las custom properties sólo se pueden usar en las declaraciones CSS (como propiedad al crearlas --Nhexa: 4; o como valor al utilizarla porpiedad: var(--Nhexa).

Una gran puerta se abriría si fuesen admitidas en selectores :nth-child(var(--Nhexa)n) {}. Este pequeño inconveniente lo solventarás si utilizas algún procesador de CSS.

Ecos y menciones

Con el paso del tiempo desde su publicación [7.4.17] estas realizaciones han sido objeto de menciones y recogidas en diversas páginas como ejemplo de lo que se puede lograr de forma sencilla con el CSS Grid Layout. Entre otras te reseño:

Adenda

En fechas posteriores a la realización y publicación de estas demos seguí jugando con el tema. El resultado fue el artículo "Auto hexagonal CSS Grid Layout V3 en panal" que puedes disfrutar en el siguiente enlace:

Auto hexagonal CSS Grid Layout V3 en panal
Captura de la 3ª versión de Auto hexagonal CSS Grid Layout

Auto hexagonal CSS Grid Layout V3 en panal

avatar del Editor del blog

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 Don Kseso Kseso