Greetings everyone, I want to express my gratitude for taking the time to assist me! :D
After some exploration, I believe I have discovered a straightforward solution that doesn't require JavaScript.
Here is the CSS code:
.gallery{
max-width: 1150px;
width: 95%;
margin: 75px auto 100px;
}
.gallery ul{
padding: 0;
margin: 0;
position: relative;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
column-fill: balance;
}
.gallery ul li{
display: block;
margin-top: 10px;
width: 100%;
}
.gallery ul li:nth-child(1){
margin-top: 0;
}
.gallery ul li img{
width: 100%;
display: block;
}
@media screen and (max-width: 860px){
.gallery{
max-width: 700px;
}
.gallery ul{
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}
@media screen and (max-width: 450px){
.gallery ul{
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
}
Also, here is the HTML file where PHP is used to retrieve data from a database where thumbnails and images are stored:
<div class="gallery">
<?php if(!empty($images)): ?>
<ul>
<?php foreach($images as $image): ?>
<li><img src="<?php echo $image['thumb']; ?>"></li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<p>No images yet.</p>
<?php endif; ?>
</div>
It's important to note that the first child of the unordered list has its top margin set to zero. Failure to address this can cause alignment issues in the layout when multiple columns are involved.
For more information on multicomlumns, feel free to visit W3 multicol layout module