Responsive Pinterest Style - CSS Only

by Hugo Carneiro

HTML

<div id="pin-columns">
  <div class="pin">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1473711409856-39138e48cb9b?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=2248&q=80&cs=tinysrgb" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p>
    </a>
  </div>
  <div class="pin">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1473743623983-d15c2bcb4da2?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb" />
      <p>Donec a fermentum nisi.</p>
    </a>
  </div>
  <div class="pin">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1473777805911-9a11742c7596?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb" />
      <p>Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.</p>
    </a>
  </div>
  <div class="pin">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1473772564351-202a22a93101?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=2024&q=80&cs=tinysrgb" />
      <p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
    </a>
  </div>
  <div class="pin">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1473777785975-efb668f9ea99?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb" />
      <p>Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.</p>
    </a>
  </div>
  <div class="pin">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1473760516271-1b48b68a4d16?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=864&q=80&cs=tinysrgb" />
      <p>
        Lorem ipsum dolor sit amet, consectetur...

CSS

#pin-columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}

.pin {
  display: inline-block;
  background: #FEFEFE;
  border: 1px solid #ECECEC;
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 10px;
  padding-bottom: 10px;
}

.pin img {
  width: 100%;
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}

@media (max-width: 639px) {
  #pin-columns {
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 15px;
    column-fill: auto;
  }
}

@media (max-width: 479px) {
  #pin-columns {
    -webkit-column-count: 1;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 1;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 1;
    column-gap: 15px;
    column-fill: auto;
  }
}