Masonry Layout
Use the `columns` property to create a beautiful masonry layout:
Demo:
HTML
CSS
Preview
<div class="masonry">
<img src="https://picsum.photos/id/10/1000/600">
<img src="https://picsum.photos/id/11/600/600">
<img src="https://picsum.photos/id/12/1000/600">
<img src="https://picsum.photos/id/13/600/600">
<img src="https://picsum.photos/id/14/1000/600">
<img src="https://picsum.photos/id/15/600/600">
<img src="https://picsum.photos/id/16/1000/600">
<img src="https://picsum.photos/id/17/1000/600">
<img src="https://picsum.photos/id/18/600/600">
<img src="https://picsum.photos/id/19/1000/600">
</div>
.masonry {
columns: 3;
column-gap: 10px;
}
.masonry img {
display: block;
max-width: 100%;
margin-bottom: 10px;
}
Did you like this CSS code snippet? Share it with your friends:
LAST UPDATED
May 09, 2024