<section id="photo-gallery">
<div class="gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="gallery-item">
<img src="https://picsum.photos/200/100?random=1">
</div>
<div class="gallery-item">
<img src="https://picsum.photos/400/400?random=1">
</div>
<div class="gallery-item">
<img src="https://picsum.photos/400/600?random=1">
</div>
<div class="gallery-item">
<img src="https://picsum.photos/200/200?random=1">
</div>
<div class="gallery-item">
<img src="https://picsum.photos/500/400?random=1">
</div>
</section>
#photo-gallery{
column-count: 3;
column-gap: 10px;
width:600px;
margin:0 auto;
}
img{
max-width: 100%;
height: auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.