<main>
  <h1>Responsive Boxes
    <span>With Flex Box</span></h1>
  <ul class="boxes">
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
        <p>And some text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/400/400/people" alt="Picture 2">
        <p>And another bit of text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
        <p>More text that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/400/400/people" alt="Picture 2">
        <p>And another bit of text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
        <p>More text that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
        <p>And some text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
        <p>And some text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/400/400/people" alt="Picture 2">
        <p>And another bit of text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
        <p>More text that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/400/400/people" alt="Picture 2">
        <p>And another bit of text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
        <p>More text that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
        <p>And some text.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
        <p>More text that is quite a bit longer than the other one before it.</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="http://lorempixel.com/400/400/people" alt="Picture 2">
        <p>And another bit of text.</p>
      </a>
    </li>
  </ul>
</main>
body {
  background: #000;
  font-family: sans-serif;
}

main {
  background: #fff;
  margin: 2em auto;
  max-width: 60em;
  width: 94%;
}

h1 {
  text-align: center;
  font-size: 3em;
}

h1 span {
  display: block;
  font-size: 0.6em;
  font-family: serif;
  font-style: italic;
}

.boxes {
  margin: 16px auto;
  padding: 0;
  text-align: center;
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
}

.boxes li {
  display: inline-block;
  flex: 1 1 12em;
  border: 2px solid #6F0212;
  border-radius: 25px;
  margin: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
}

.boxes a {
  display: block;
  text-decoration: none;
  padding: 8px;
  height: 100%;
}

.boxes img {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 20px
}

.boxes li:hover {
  background: #fd6;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.