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

·Por 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