Masonry layout for galleries

[3muchfun]

Hi, @candidexmedia,

I adapted your css from https://gist.github.com/candidexmedia/374a7ae87cc4d2fbc622ca3a50773106 , and it works pretty well, except one thing: I chose a wide gallery layout while creating the gallery in the post, but the output in preview mode is the standard small layout.

Output:

Output if I change to 'your' masonry layout:

Thanks in advance, Michael

[candidexmedia]

Hi! Do you have a link to a live page that can be inspected?

[3muchfun]

not at the moment, I will provide one next week

[3muchfun]

@candidexmedia , as requested:
Both sites have the same gallery layout, 3 columns, wide, as mentioned above.
normal, wide gallery: https://fluegge.net/galleries/black-and-white/
cloned website with the CSS changes, also wide: https://fluegge.net/galleries2/black-and-white/

[candidexmedia]

Thanks @3muchfun !

Replace:

@media all and (min-width:56.25em) {
  .gallery-wrapper--wide .gallery {
    width:calc(100% + .5666666667rem)
  }
}

With:

@media all and (min-width:56.25em) {
  .gallery-wrapper--wide {
    display:flex;
    justify-content:center;
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%)
  }
  .gallery-wrapper--wide .gallery {
    padding:0 var(--page-margin);
    max-width:var(--page-width)
  }
}

I've also updated my gist. Thanks for flagging!

[3muchfun]

thank you very much, @candidexmedia :-)
I checked it with my setup and it works pretty well.

[3muchfun]

@candidexmedia , do you have an idea on how to remove the little gap above the first image in the middle column?

[candidexmedia]

Glad it worked!

Which URL is experiencing the gap?

[3muchfun]

yeah, thanks for your effort :-)
it happens at https://fluegge.net/galleries2/black-and-white/