JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div id="photos">
        <a href="http://i.stack.imgur.com/VnYkw.gif"><img src="http://i.stack.imgur.com/VnYkw.gif0" alt="Little doggie"></a>
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little kittie">
        <img src="http://i.stack.imgur.com/VnYkw.gif" alt="Little doggie">
        <img src="http://i.stack.imgur.com/VnYkw.gif"...

CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   5px;
   -moz-column-count:    5;
   -moz-column-gap:      5px;
   column-count:         5;
   column-gap:           5px;


}
#photos img {
  /* Just in case there are inline attributes */
  margin-top:4px;
  width: 10% !important;
  height: auto !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
    float:left;

}

#photos img:hover{
    transform:scale(1.5);
}

@media (max-width: 1200px) {
  #photos {
      -moz-column-count:    4;
      -webkit-column-count: 4;
      column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
      -moz-column-count:    3;
      -webkit-column-count: 3;
      column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
      -moz-column-count:    2;
      -webkit-column-count: 2;
      column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
      -moz-column-count:    1;
      -webkit-column-count: 1;
      column-count:         1;
  }
}