Cascading masonry gallery styling
-
Wanting to create an image gallery that uses the full (or close to full) height of each image into a vertical cascading gallery, similar to how Pinterest lays out its images. At the moment the Oncord gallery defaults to square images, and I can't work out how to alter this.
Ben Johnston
Evocative | Brand Design
evocative.cc -
Masonry might be the actual term for the gallery style.
-
Hey Ben,
Currently we've been holding off implementing this until there is greater CSS support amongst browsers for masonry layouts.
But unfortunately, there has been politics in the browser space as to how this will be implemented. A debate that has gone on for years now.Safari and Firefox have implemented a version which hangs off 'CSS grid' using
grid-template-rows: masonry;
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layoutChrome wants to implement the same feature using
display: masonry.
https://developer.chrome.com/blog/masonryAnother reference:
https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/#the-debateOnce it is implemented in a stable manner across browsers, we will add support to the native gallery for it.
Until then, Oncord's gallery won't support masonry layouts and you would need to use an external JS solution for it. -
Thanks Scott ... your answer would help explain the lack of straightforward solutions out there on the web!
Glad to hear you're looking at implementing it once the standards are established.
