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.
/* MASONRY CSS */
/* 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.
I implemented this pattern on one of the pages on my site incuencaecuador.com/bugs to display the collection of insects and other critters that I have observed while living in Cuenca, Ecuador.
<?php
// 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>
</div>
<?php endif; ?>
<span class="bug-card-title card-title"><?php echo $name; ?></span>
</div>
<div class="card-content">
<p><?php echo $description; ?></p>
</div>
<div class="card-action">
<a href="<?php echo $permalink; ?>">Read More</a>
</div>
</div>
</div>
<?php endwhile;?>
