<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)
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.