Css grid images

Question

I want to create a grid layout with css to display images with different height like a mosaic.I use the following code for html

<div id="photos">
        <a href="../media/images/0.jpg"><img src="../media/images/0.jpg" alt="Little doggie"></a>
        <img src="../media/images/1.jpg" alt="Little kittie">
        <img src="../media/images/2.jpg" alt="Little kittie">
        <img src="../media/images/3.jpg" alt="Little doggie">
        <img src="../media/images/4.jpg" alt="Little kittie">
        <img src="../media/images/5.jpg" alt="Little kittie">
        <img src="../media/images/6.jpg" alt="Little doggie">
        <img src="../media/images/7.jpg" alt="Little kittie">
        <img src="../media/images/8.jpg" alt="Little kittie">
        <img src="../media/images/9.jpg" alt="Little doggie">
        <img src="../media/images/10.jpg" alt="Little kittie">
        <img src="../media/images/11.jpg" alt="Little kittie">
        <img src="../media/images/12.jpg" alt="Little doggie">
        <img src="../media/images/13.jpg" alt="Little kittie">
        <img src="../media/images/14.jpg" alt="Little kittie">
        <img src="../media/images/15.jpg" alt="Little doggie">
        <img src="../media/images/16.jpg" alt="Little kittie">
        <img src="../media/images/17.jpg" alt="Little kittie">
        <img src="../media/images/18.jpg" alt="Little doggie">
        <img src="../media/images/19.jpg" alt="Little kittie">
        <img src="../media/images/20.jpg" alt="Little kittie">
        <img src="../media/images/21.jpg" alt="Little doggie">
        <img src="../media/images/22.jpg" alt="Little kittie">
        <img src="../media/images/23.jpg" alt="Little kittie">
        <img src="../media/images/24.jpg" alt="Little doggie">
        <img src="../media/images/25.jpg" alt="Little kittie">
        <img src="../media/images/26.jpg" alt="Little kittie">
        <img src="../media/images/27.jpg" alt="Little doggie">
        <img src="../media/images/28.jpg" alt="Little kittie">
        <img src="../media/images/29.jpg" alt="Little kittie">
        <img src="../media/images/30.jpg" alt="Little doggie">
        <img src="../media/images/31.jpg" alt="Little kittie">
        <img src="../media/images/32.jpg" alt="Little kittie">
        <img src="../media/images/33.jpg" alt="Little doggie">
        <img src="../media/images/34.jpg" alt="Little kittie">
        <img src="../media/images/35.jpg" alt="Little kittie">
        <img src="../media/images/36.jpg" alt="Little doggie">
        <img src="../media/images/37.jpg" alt="Little kittie">
        <img src="../media/images/38.jpg" alt="Little kittie">
        <img src="../media/images/39.jpg" alt="Little doggie">
        <img src="../media/images/40.jpg" alt="Little kittie">
        <img src="../media/images/41.jpg" alt="Little kittie">
        <img src="../media/images/42.jpg" alt="Little doggie">
        <img src="../media/images/43.jpg" alt="Little kittie">
        <img src="../media/images/44.jpg" alt="Little kittie">
        <img src="../media/images/45.jpg" alt="Little doggie">                        

    </div>

and 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: 100% !important;
  height: auto !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

}

#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;
  }
}

But when I run it on mozilla it won't work and also when the image scales some times it disappears leaving blank area white. Is there something wrong? Here is the jsfiddle

You can check out this answer for a mosaic of images : http://stackoverflow.com/questions/22221333/make-a-mosaic-of-images-in-html-css/22412842#22412842 — web-tiki, Nov 12 '14 at 09:18

score 1 · Answer 1 · answered Nov 12 '14 at 09:32

1

Check it:-

#photos img {
  /* Just in case there are inline attributes */
  margin-top:4px;
  width: 20% !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

}

DEMO

answered Nov 12 '14 at 09:32

Mukul Kant

7,074
5
38
53

but it still doesn't work on my mozilla and still Images disappear when scaled... – Apostolos Nov 12 '14 at 09:35
ver 33.0.Images disappear when scaled in both browsers. Images not the same size also. Never seen it before. Could it be that they like overlap when scaled? Mozilla shows images one bellow the other. – Apostolos Nov 12 '14 at 09:38

Css grid images

1 Answers1