Cacher is the code snippet organizer for pro developers

body {
  font-size:13px;
  font-family:sans-serif;
  font-weight:normal;
}
.gal {
  display: block;
  width: 99.8%;
  margin: 0;
  padding: 0 1px;
  -moz-column-gap: 1px;
  -webkit-column-gap: 1px;
  -webkit-column-gap: 1px;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  -webkit-column-count: 1;
  box-sizing: border-box;
  background: #000;
}
.gal > .galbox {
  display: inline-block;
  width: 100%;
}
.galbox img {
  display:block;
  width:100%;
}
.galbox {
  position:relative;
  overflow:hidden;
  text-decoration:none;
  background: #fdfdfd;
  color:#777;
}
.galbox h3 {
  margin:0;
  padding:3px 4px;
  text-align:center;
  color:#f55;
}
.galbox p {
  margin:0;
  padding:3px 5px;
  color:#888;
}
.galbox:before {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1px;
  margin: 0;
  box-shadow: inset 0 0 11px 508px rgba(0, 0, 0, 0.5);
  transition:box-shadow 0.5s ease;
}
.galbox:hover:before {
  box-shadow: inset 0 0 0 0 #3498DB;
  transition:box-shadow 0.5s ease;
}
@media screen and (min-width:640px) {
  .gal {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media screen and (min-width:768px) {
  .gal {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media screen and (min-width:1024px) {
  .gal {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}
@media screen and (min-width:1200px) {
  .gal {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
  

/*
     * ======================
     *    ONLY FOR DEMO
     * ======================
     */
// arr width sizes
var row_class = 'gal', // row class
    item_class = 'galbox', // item class
    items = 100, // num of items
    arrW = [500, 200, 250, 300, 350, 400, 450],
    // arr height sizes
    arrH = [500, 200, 250, 300, 350, 400, 450],
    // arr titles
    arrT = ['Lorem', 'Europan', 'Aenean', 'scientie', 'musica', 'existentie', 'espíritu'],
    // arr content
    arrC = ['Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui', 'Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa', 'Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas. Un riachuelo llamado Pons fluye por su pueblo y los', 'Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos', 'Reina en mi espíritu una alegría admirable, muy parecida a las dulces alboradas de la primavera, de que gozo aquí con delicia. Estoy solo, y me felicito de vivir en este país, el más a propósito para almas como la mía, soy tan dichoso, mi querido amigo, me sojuzga de'],
    // template html
    html = '<div class="' + row_class + '">';

for (var i = 0; i < items; i++) {
  // random arrays
  var w = arrW[Math.floor(Math.random() * arrW.length)],
      h = arrH[Math.floor(Math.random() * arrH.length)],
      t = arrT[Math.floor(Math.random() * arrT.length)],
      c = arrC[Math.floor(Math.random() * arrC.length)],
      // img link
      img = 'http://lorempixel.com/' + w + '/' + h;
  // items structure
  html += '<a class="' + item_class + '" href="' + img + '" title="img">' +
    '<img src="' + img + '" alt="image"/><h3>' + t + '</h3><p>' + c + '</p></a>';
}
// render in body
document.body.innerHTML = html;

  <h1>Column-count demo loading please wait a momment...</h1>