#maCSSonry layout puro #CSS Grid 27.7.17

#maCSSonry layout puro #CSS Grid

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.

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