Learn How to Make a Masonry Grid Purely With CSS

Craft perfect galleries effortlessly with CSS! Say goodbye to JS for masonry grids. No resizing issues, no gaps. Optimize your website now.

Tweet
Share
Share
Pin

I was so used to using JS to create the masonry grid, but I found that you can do this with CSS without any issues. Use this code to create your galleries on your website without any problems with resizing and gaps.

HTML

div class="container">
  <figure>
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
    <figcaption><a href="#">1</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="The Clifton Suspension Bridge" />
    <figcaption><a href="#">2</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/sunset.jpg" alt="Sunset and boats" />
    <figcaption><a href="#">3</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/snowy.jpg" alt="a river in the snow" />
    <figcaption><a href="#">4</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-balloons1.jpg" alt="a single checked balloon" />
    <figcaption><a href="#">5</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/dog-balloon.jpg" alt="a hot air balloon shaped like a dog" />
    <figcaption><a href="#">6</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/abq-balloons.jpg" alt="View from a hot air balloon of other balloons" />
    <figcaption><a href="#">7</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/disney-balloon.jpg" alt="a balloon fairground ride" />
    <figcaption><a href="#">8</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-harbor.jpg" alt="sunrise over a harbor" />
    <figcaption><a href="#">9</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-balloons2.jpg" alt="three hot air balloons in a blue sky" />
    <figcaption><a href="#">10</a></figcaption>
  </figure>
  <figure>
  <img src="https://assets.codepen.io/12005/toronto.jpg" alt="the Toronto light up sign at night" />
    <figcaption><a href="#">11</a></figcaption>
  </figure>
</div>

CSS

body {
  background-color: #000;
  font: 1.1em Arial, Helvetica, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}

figure > img {
  grid-row: 1 / -1;
  grid-column: 1;
}

figure a {
  color: black;
  text-decoration: none;
}

figcaption {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(255,255,255,.5);
  padding: .2em .5em;
  justify-self: start;
}

.container {
  column-count: 4;
  column-gap: 10px;
}

For more examples use this link: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/