soy Kseso y esto EsCSS

#maCSSonry layout puro #CSS Grid

Jugando a emular el conocido como layout masonry pero en puro CSS. Y una segunda versión con el lazy-load images de Furoya.

#maCSSonry layout puro #CSS Grid

xPor Kseso ✎ 4
Pure #CSS Grid Layout as masonry with grid-auto-flow: dense

Así, como adelanto, para que disfrutes investigando por tu cuenta y descubriendo algo más de todo el potencial que se esconde en el CSS Grid Layout y que poco a poco va saliendo a la luz.

En esta ocasión, y pendiente de una explicación detallada del cómo y el porqué (propiedades y valores concretos que lo hacen posible), te muestro esta demo que emula (a mi modesto entender) bastante bien el típico layout de masonry, obra de @desandro.

Además de la explicación también tengo pendiente una pequeña variación de esta demo con el lazy load images de Furoya.

Hasta entonces, DISFRUTA CON CSS. ¡Ah! Que casi lo olvido. Mejor ve la demo a pantalla completa y juega a redimensionarla.

See the Pen CSS Grid layout as masonry with dense by Kseso (@Kseso) on CodePen.



v.2 con el Lazy-load de Furoya

Tras la realización anterior tenía pendiente añadirle el javascript del colaborador de este blog @Furoya con el que nos maravilló en su momento: lazy-load images puro js y ver si no rompía nada con mi ignorancia.

Lo cierto es que fue tan sencillo de hacer gracias a la calidad del js de Furoya que lo único que tuve que hacer fue otorgar crédito y origen a su js en este pen ;-)

Las ventajas innegables. Sobran volverlas a poner por escrito una vez más en este espacio.

Sigue disfrutando de CSS

See the Pen Masonry layout Pure CSS Grid v.2 by Kseso (@Kseso) on CodePen.

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

Comentarios: 4

  1. Fantástica demo, la verdad es que grid da mucho juego. Para la explicación que comentas tienes pendiente, quizás te sirva este completísimo artículo de SitePoint al respecto del algoritmo tras Auto-Placement https://www.sitepoint.com/a-step-by-step-guide-to-the-auto-placement-algorithm-in-css-grid/

    ResponderEliminar
    Respuestas
    1. Gracias por el enlace, Amram

      Aunque no en detalle sí que tengo alguna noción de qué y cómo va lo del auto placement.
      Pero en la demo traté de crear el mayor "caos" posible, esto es, no controlar a priori ni el número de columnas creadas ni lo que se expande cada figure.

      De ahí que los selectores nth-*() no estén optimizados, existan colisiones entre ellos y otros figure's queden sin seleccionar por ellos.

      Sólo busqué que el efecto de grid-auto-flow: dense fuese notorio en las primeras filas al hacer click en el label correspondiente.

      Un saludo

      Eliminar
  2. Qué bien vendés mis engendros...
    Y encima ya se van a dar cuenta de que la mayoría son realmente "cut&paste". Aunque siempre se pueden hacer más eficientes, como al reemplazar

    [code]onscroll = mueve; [/code]

    por

    [code]window.addEventListener("scroll", mueve, false);[/code]

    Otra cosa que seguro se puede reducir más es el loop; pero no lo voy a hacer yo.

    Gracias por la demo y los conceptos.

    ResponderEliminar
    Respuestas
    1. De alguna forma, Furoya, tengo que intentar recuperar todo el tiempo y espacio que te he dedicado en el blog.
      😎 😂 👻

      Y dónde vas a comparar onscroll = mueve; con ese otro galimatías.
      onscroll = mueve; tiene ritmo, es poesía, toda un grito de guerra final en dos palabras.
      Insuperable.

      Un gusto poder darle un uso práctico a una de tus "masterpieces".

      Un saludo.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap