<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

External CSS

  1. https://trevoreyre.com/codepen/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.