WordPress: How to style gallery shortcode into masonry layout? - css

Question

I'm trying to make a masonry layout possible through using (placing this in the page content section):
[gallery size="large" link="file" columns="4" ids="1,2,3"]
Documentation: https://codex.wordpress.org/Gallery_Shortcode
But even though this is the desired effect:
This is what keeps happening:
Essentially, if there was some CSS or even javascript that could be added to transform the gallery to do this, would be fantastic.
My code at the moment, looks like this:
<div class="gallery-template">
the_content();
</div>
And my additional css is:
.gallery-template img{
max-width: 100%;
height: auto;
border: none !important;
}
.gallery-item{
width: 33% !important;
margin: 0;
margin-top: 0 !important;
}
This doesn't exactly do anything to solve the problem of when a new section of thirds starts, to get rid of the padding and margin between the "rows".
When the [gallery] shortcode mentioned above gets rendered, the way it's rendered in the DOM is like so:
<div class="gallery-template">
<div id="gallery-1" class="gallery">
<dl class="gallery-item">...</div>
<dl class="gallery-item">...</div>
<dl class="gallery-item">...</div>
// And so on..
</div>
</div>
And the CSS rendered in the DOM is:
#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
text-align: center;
}
.gallery-item {
width: 33% !important;
margin: 0;
margin-top: 0 !important;
}
Has anyone implemented a solution for this sort of obstacle yet?
Also, I'm trying to refrain from using an external plugin.

Answer 1

This is, indeed, a css question. I would suggest checking out flexbox. Creating an entire solution for you will be a little tricky since you haven't posted your html, so if this exact code doesn't work, try editing your post to include some of it.
#gallery-1 {
display: flex;
flex-direction: column;
}
.gallery-item {
flex: 0 1 33%;
margin: 0;
margin-top: 0 !important;
}

Answer 2

OK! I was able to get this working. Here's my solution:
First, it was necessary to prohibit the gallery shortcode to inject external styles into the page. So in the funtions.php file, I added:
add_filter( 'use_default_gallery_style', '__return_false' );
Next, I took out the column specification in the shortcode tag I was incorporating in the page, like so:
[gallery size="large" link="file" ids="1,2,3"]
Rather than:
[gallery size="large" link="file" columns="4" ids="1,2,3"]
Lastly, I placed this CSS into my page (including the column-count):
.gallery-template{margin:auto; column-count:4;column-gap:0;}
.gallery-template img{max-width:100%;height:auto;border:none !important;}
.gallery-item{margin:0;display:inline-block;width:100%;width:100%;margin-top:0;}
EXTRA: If you are looking to make this responsive, simply add the #media tags where you want your preferred breakpoints, and place in the new number of columns, like so:
#media screen and (max-width:1200px) {
.gallery-template{column-count:3;}
}
#media screen and (max-width:772px) {
.gallery-template{column-count:2;}
}