<main class="gallery">
<h1>A peek at Space 👀</h1>
<ul class="gallery__list">
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22942_hires.jpg" alt="Juno's Latest Flyby of Jupiter Captures Two Massive Storms">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA23021_hires.jpg" alt="A first look at dunes">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA23002_hires.jpg" alt="K2-138 6 Planets Artwork (Artist's Illustration) ">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA21212_hires.jpg" alt="Small Prominences">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22983_hires.jpg" alt="Ezinu Crater">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22990_hires.jpg" alt="Polar Ice">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22963_hires.jpg" alt="Jupiter">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22918_hires.jpg" alt="Star Gaia 17pbi Seen by Spitzer">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22900_hires.jpg" alt="Another Cloudy Day">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22941_hires.jpg" alt="South Equatorial Belt Brown Barge Close-up">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22936_hires.jpg" alt="Earth-based Observation of Jupiter">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22937_hires.jpg" alt="Jupiter's South Tropical Disturbance">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22933_hires.jpg" alt="Jupiter's Southern Circumpolar Cyclones">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22906_hires.jpg" alt=" Juno Flyby Movie ">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22895_hires.jpg" alt="Swiss Cheese on a Red Planet">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA21211_hires.jpg" alt="Solar Active Region's Cameo Appearance">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22914_hires.jpg" alt="Bow Shock Around Young Star">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22695_hires.jpg" alt="Jupiter's North Equatorial Belt">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22770_hires.jpg" alt="Titan Mosaic: The Surface Under the Haze">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA18144_hires.jpg" alt="Reappearing Coronal Hole">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22820_hires.jpg" alt="NASA's ASTER Captures Lava Flow, Ash from Guatemala Volcano">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22869_hires.jpg" alt="Active Dunes in Wirtz Crater">
</figure>
</li>
<li>
<figure>
<img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22569_hires.jpg" alt="Supernova Remnant G54">
</figure>
</li>
</ul>
</main>
main.gallery {
padding: 2rem;
}
.gallery > h1 {
font-size: 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-bottom: 1rem;
color: #333333;
font-weight: 100;
}
.gallery > .gallery__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-template-rows: repeat(6, 200px);
grid-gap: 1rem;
grid-auto-flow: dense;
}
.gallery > .gallery__list > li:nth-child(4n) {
grid-column: span 2;
grid-row: span 2;
}
.gallery > .gallery__list > li:nth-child(8n) {
grid-column: span 3;
grid-row: span 3;
}
.gallery > .gallery__list > li > figure {
height: 100%;
}
.gallery > .gallery__list > li > figure > img {
width: 100%;
height: 100%;
object-fit: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.