<header>
<h1>CSS masonry layout</h1>
<p>A Pinterest-like masonry layout using CSS column properties. No JavaScript required! <a href='https://caniuse.com/#feat=multicolumn' target='_blank'>View browser support</a>.</p>
</header>
<main>
<div class='container'>
<div class='masonry-grid'>
<div class='cell ratio3x4'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/300x400'>
</div>
<div class='cell ratio4x3'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x300'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/300x300'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/350x350'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio9x16'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/450x800'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/310x310'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/320x320'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio9x16'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/450x800'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio3x4'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/300x400'>
</div>
<div class='cell ratio3x4'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/300x400'>
</div>
<div class='cell ratio4x3'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x300'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/330x330'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/340x340'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio9x16'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/450x800'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/350x350'>
</div>
<div class='cell ratio3x4'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/300x400'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/360x360'>
</div>
<div class='cell ratio1x1'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/370x370'>
</div>
<div class='cell ratio16x9'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/400x225'>
</div>
<div class='cell ratio9x16'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/450x800'>
</div>
<div class='cell ratio3x4'>
<img src='https://source.unsplash.com/user/trevoreyre/likes/300x400'>
</div>
</div>
</div>
</main>
* {
box-sizing: border-box;
}
.container {
margin: 40px auto;
padding: 0 24px;
width: 100%;
}
.masonry-grid {
column-width: 296px;
column-gap: 24px;
}
img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
/* Placeholder divs to prevent page jumping */
.cell {
position: relative;
margin-bottom: 24px;
height: 0;
overflow: hidden;
background: #eee;
break-inside: avoid;
border-radius: 8px;
}
.cell img {
position: absolute;
top: 0;
left: 0;
}
.ratio1x1 {
padding-bottom: 100%;
}
.ratio3x4 {
padding-bottom: 133.33%;
}
.ratio4x3 {
padding-bottom: 75%;
}
.ratio16x9 {
padding-bottom: 56.25%;
}
.ratio9x16 {
padding-bottom: 177.77%;
}
View Compiled
This Pen doesn't use any external JavaScript resources.