Masonry-Like Gallery with CSS and ACF for wordpress

<h3 class="entry-title">Masonry-Like Gallery with CSS and ACF for wordpress</h3>
Posted on

While browsing the web I started to notice a pattern of variable height elements  flowing and fitting . There is a javascript library that offers an implementation but I also came across a pure css solution on stack overflow that is supported by recent browsers with a handful of issues that need to be handled for complete browser support.

/* The Masonry Container */

.masonry {
	margin: 1.5em auto;
	/* max-width: 768px; */
	column-gap: 1.5em;

/* The Masonry Brick */

.item {
	margin: 0 0 1.5em;
	width: 100%;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;

/* Masonry on large screens */

.masonry-pano {
	column-count: 1;
		margin: 1.5em auto;
		column-gap: 1.5em;
@media only screen and (min-width: 1024px) {
	.masonry {
		column-count: 4;

/* Masonry on medium-sized screens */

@media only screen and (max-width: 1023px) and (min-width: 768px) {
	.masonry {
		column-count: 3;

/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
	.masonry {
		column-count: 2;

One issue I encountered was my card content being split between two columns, but luckily there are some prefixes that can be applied to fix the issue.

Image of display render error with css property
Multiple column display error due to missing prefixes.



I implemented this pattern  on one of the pages on my site to display the collection of insects and other critters that I have observed while living in Cuenca, Ecuador.


// Query all bug custom posts.
$args = array( 'post_type' => 'bug', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();
    $id  = $post->ID;					
    $post = get_post();
    $permalink = get_post_permalink($post);
    $image = get_field('featured_image');
    $category = get_field('category');
    $name = get_field('name');
    $description = get_field('description');
    <div class="item">
        <div class="card">
            <div class="card-image">
            <?php if( !empty($image) ): 
                // vars
                $url = $image['url'];
                $title = $image['title'];
                $alt = $image['alt'];
                $caption = $image['caption'];
                // thumbnail
                $size = 'medium';
                $thumb = $image['sizes'][ $size ];
                $width = $image['sizes'][ $size . '-width' ];
                $height = $image['sizes'][ $size . '-height' ];?>
                <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
                <!-- Category Badge--> 
                <div style="position: absolute; top: .25rem; left: 0.25rem; background-color: #ffee58;">
                     <span class="badge" style=" margin-left: 0;"><?php echo $category ?></span>
            <?php endif; ?>
                <span class="bug-card-title card-title"><?php echo $name; ?></span>
            <div class="card-content">
                <p><?php echo $description; ?></p>
            <div class="card-action">
                <a href="<?php echo $permalink; ?>">Read More</a>
<?php endwhile;?>