<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header class="masthead">
<h1 class="site-title">Interactive Grid Gallery</h1>
<div class="intro">
<p>Interactive gallery using CSS Grid for both overall layout and individual card layout. This layout was inspired by the <a href="https://twitter.com/i/moments" target="_blank" rel="nofollow">Twitter Moments</a> page and showcases how CSS Grid allows for advanced responsive card-based layouts at multiple levels.</p>
<p>This example is based on one of the exercises from my upcoming <a href="https://lnkd.in/mor10" target="_blank" rel="nofollow">LinkedIn Learning</a> and <a href="https://lynda.com/mor10" target="_blank" rel="nofollow">Lynda.com</a> course "Advanced Layouts with CSS Grid."
</div>
</header><!-- .masthead -->
<main id="content" class="main-area">
<ul class="cards">
<li class="card-item double">
<a href="https://unsplash.com/@andozo?photo=crVO0UMdoVU" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/crVO0UMdoVU/600x600" alt="Beach. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Beach</h3>
<div class="location">Mølen, Nevlunghamn, Norway</div>
<p>This grid item spans one column and three rows to create focus. This is achieved by setting <code>grid-column: span 3;</code>.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=xkMArBuwK44" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/xkMArBuwK44/600x600" alt="Pyramid. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Louvre Museum Pyramid</h3>
<div class="location">Paris, France</div>
<p>This grid item spans one column and one row. The card contains its own grid which lays out the contents for consistent display.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=w3lQVmuK8fw" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/w3lQVmuK8fw/600x600" alt="Fox. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">What Does the Fox Say?</h3>
<div class="location">Hovedøya, Norway</div>
<p>I was surprised to learn there are foxes on Hovedøya. Then again, there are rabbits, so it makes sense.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=lr81rOg-gys" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/lr81rOg-gys/600x600" alt="Owl. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Brown Barn Owl</h3>
<div class="location">Bamble, Norway</div>
<p>Unlike the fox, everyone knows what the owl says: "Did you do that?"</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=KUfkX6gVwBU" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/KUfkX6gVwBU/600x600" alt="Oslo. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Little Oslo Is Its Own Planet</h3>
<div class="location">Oslo, Norway</div>
<p>All the streets are different nations, each block a continent.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item double">
<a href="https://unsplash.com/@andozo?photo=8hRYTck6LBQ" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/8hRYTck6LBQ/600x600" alt="Sunset. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Sunset Lake</h3>
<div class="location">Somewhere, Earth</div>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=i9FLJwYhVQs" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/i9FLJwYhVQs/600x600" alt="Lake. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Bonfire by the Lake</h3>
<div class="location">Øyungen, Norway</div>
<p>Low light over a lake as three friends warm themselves by the fire.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=5d2ETacuSgw" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/5d2ETacuSgw/600x600" alt="Jump. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Jumping</h3>
<div class="location">Geiranger, Norway</div>
<p>Jumping behind a fence overlooking the Geiranger fjord.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=vMRMYoLQzwo" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/vMRMYoLQzwo/600x600" alt="Oslo Fjord. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">In the Bay</h3>
<div class="location">Oslo, Norway</div>
<p>Greeting the ships sailing in on a late summer evening.</p>
</figcaption>
</figure>
</a>
</li>
<li class="card-item">
<a href="https://unsplash.com/@andozo?photo=S2YssLw97l4" target="_blank" rel="nofollow">
<figure class="card">
<img src="https://source.unsplash.com/S2YssLw97l4/600x600" alt="Oslo Fjord. Photo by Andreas Rønningen">
<figcaption class="caption">
<h3 class="caption-title">Sparklers and Warm Souls</h3>
<div class="location">Porsgrunn, Norway</div>
<p>A couple enjoys the sparkles of warm friendship.</p>
</figcaption>
</figure>
</a>
</li>
</ul>
</main>
<footer class="colophon grid">
<aside>Content, layout, design: <a href="https://twitter.com/mor10" target="_blank" rel="nofollow">Morten Rand-Hendriksen</a>.</aside>
<aside>All photos: <a href="https://unsplash.com/@andozo" target="_blank" rel="nofollow">Andreas Rønningen</a>.</aside>
</footer>
/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/*--------------------------------------------------------------
General styling
--------------------------------------------------------------*/
body {
margin: 0;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 100%;
font-size: 1.2em;
}
img {
display: block;
border: 0;
width: 100%;
height: auto;
}
code {
font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-weight: bold;
}
/* Header */
.masthead {
text-align: center;
border-bottom: 1px solid hsl(0, 0%, 90%);
}
.intro {
margin: 0 auto;
padding: 1em 1em 2em;
max-width: 50em;
font-size: 90%;
text-align: left;
line-height: 1.4em;
columns: 2;
column-gap: 2em;
}
.intro p {
margin: 0 0 1em;
}
/* Colophon section */
.colophon {
padding: 2em;
background: hsl(0, 0%, 10%);
color: white;
font-size: 90%;
text-align: center;
line-height: 1.8em;
}
.colophon a {
color: white;
}
.colophon a:hover,
.colophon a:focus {
border-bottom: 1px solid white;
}
/*--------------------------------------------------------------
Cards:
--------------------------------------------------------------*/
.cards {
max-width: 25em;
margin: 1em auto;
padding: 0;
list-style-type: none;
}
.cards a {
display: block;
margin-bottom: 1em;
text-decoration: none;
}
.caption {
padding: 1em;
font-size: 90%;
color: black;
}
.caption-title {
margin: 0;
font-size: 1.4em;
line-height: 1em;
}
.location {
padding: .5em 0;
color: hsl(0, 0%, 40%);
}
.caption p {
margin-top: .5em;
margin-bottom: 0;
line-height: 1.3em;
}
.cards a:focus .caption,
.cards a:hover .caption {
background: hsl(0, 0%, 97%);
}
/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/
@supports (grid-area: auto) {
@media screen and (min-width: 27em) {
.cards {
margin: 0 auto;
padding: 1em;
}
.card-item,
.card-item a {
display: flex;
align-items: stretch;
width: 100%;
}
.cards a:focus,
.cards a:hover {
outline: 1px solid hsl(0, 0%, 80%);
}
.cards a:focus .caption,
.cards a:hover .caption {
background: white;
}
.card {
margin: .5em;
display: grid;
grid-template-columns: 8em auto;
overflow: hidden;
}
.card img {
/* height: 100%;
width: auto; */
}
.caption {
background: white;
}
}
@media screen and (min-width: 62em) {
.cards {
max-width: none;
margin: 1em 0;
padding: 0 1em;
display: grid;
grid-template-columns: repeat(auto-fit, 25em);
grid-gap: 1em;
justify-content: center;
}
.double {
grid-row: span 3;
}
.double .card {
display: block;
}
.double img {
height: calc( (100% / 3) * 2 + .5em);
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.