Ragged Masonry/Isotope Page List Grid
Permalink
Good day!
I'm looking for a way to achieve a page list layout as per the attached screenshot. Received this from my designer and the customer absolutely loves it :)
Functionally, it is a modified version of the Thumbnail Grid view template for the Page List block. I'm able to achieve most of the desired look and functionality by using Isotope to style the grid-items (layoutMode: Packery and originTop: false).
Currently all items align straight along the left and right borders of the container div, and the designer wants a more asymmetrical look, with left and right indents at some points.
Does anyone have an idea how to achieve a more ragged or asymmetrical layout like in the screenshot? Is it possible at all?
Cheers
I'm looking for a way to achieve a page list layout as per the attached screenshot. Received this from my designer and the customer absolutely loves it :)
Functionally, it is a modified version of the Thumbnail Grid view template for the Page List block. I'm able to achieve most of the desired look and functionality by using Isotope to style the grid-items (layoutMode: Packery and originTop: false).
Currently all items align straight along the left and right borders of the container div, and the designer wants a more asymmetrical look, with left and right indents at some points.
Does anyone have an idea how to achieve a more ragged or asymmetrical layout like in the screenshot? Is it possible at all?
Cheers
Have you tried using stamps and static banners?
http://isotope.metafizzy.co/options.html#stamp...
http://isotope.metafizzy.co/options.html#itemselector...