Skip to content

Instantly share code, notes, and snippets.

@jscalderon65

jscalderon65/MasonryGallery.html

Last active April 26, 2023 02:13
Show Gist options
  • Save jscalderon65/f15c6136b88d08ea7fef1a98f91f7a04 to your computer and use it in GitHub Desktop.
Save jscalderon65/f15c6136b88d08ea7fef1a98f91f7a04 to your computer and use it in GitHub Desktop.
Download ZIP
A pure css grid masonry gallery.
Raw
MasonryGallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Gallery</title>
</head>
<body>
<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>
</body>
</html>
Raw
style.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment