<header>
<h1>Example Flexbox Grid Layout</h1>
</header>
<main>
<p>Using the flexbox property we can easily layout a grid gallery. This gallery is responsive and will show 2 columns when the page width is less than 50em.</p>
<div>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Cats dominate the internet.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Lorem ipsum dolor sit amet, pellentesque varius, dapibus amet varius justo, urna venenatis. Lorem ipsum lorem ipsum.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Cats dominate the internet.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Lorem ipsum dolor sit amet, pellentesque varius, dapibus amet varius justo, urna venenatis.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
February 11th 2016.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Short ca(t)ption.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Lorem ipsum dolor sit amet, pellentesque varius.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Cats dominte the internet and shall inherit the servers.
</figcaption>
</figure>
</a>
<a href="https://www.google.com">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="Image">
<figcaption>
Lorem ipsum dolor sit amet, pellentesque varius, dapibus amet varius justo, urna venenatis.
</figcaption>
</figure>
</a>
</div>
</main>
html {
background-color: #ffeedd;
}
body {
width: 80%;
margin: 20px auto;
outline: 1px solid #000;
background-color:#fff;
font-family: sans-serif;
}
div {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* or space-around */
}
a {
width: calc(50% - 8px);
outline:1px dotted #000;
text-decoration: none;
color: #000;
margin-bottom:8px;
}
a:
a:hover {
text-decoration:underline;
}
figure {
margin: 0;
overflow: hidden;
margin-bottom: 20px;
}
img {
max-width:100%;
height: auto;
display: block;
transition: transform .2s ease-in-out;
}
figcaption {
margin-top:15px;
}
a:hover img {
transform: scale(1.15);
}
@media screen and (min-width:50em) {
a {
width:calc(25% - 6px)
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.