Responsive Image Grid fix

Question

I am using this image grid: https://codepen.io/team/css-tricks/pen/pvamyK , but i need the images to load on HTML , not on js .

Like this:

<section id="photos">
 <img src="img/single.png" alt="Cute cat">
 <img src="img/single2.png" alt="Serious cat">
 <img src="img/single3.png" alt="Serious cat">
 <img src="img/single4.png" alt="Serious cat">
 <img src="img/single5.png" alt="Serious cat">
</section>

Answer 1

Just remove the js code and add images in the HTML. The js code is only creating the images markup randomly.

 #photos { /* Prevent vertical gaps */ line-height: 0; -webkit-column-count: 5; -webkit-column-gap: 0px; -moz-column-count: 5; -moz-column-gap: 0px; column-count: 5; column-gap: 0px; } #photos img { /* Just in case there are inline attributes */ width: 100% !important; height: auto !important; } @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; } } body { margin: 0; padding: 0; } 

 <section id="photos"> <img src="https://placekitten.com/344/328" alt="pretty kitty"> <img src="https://placekitten.com/333/368" alt="pretty kitty"> <img src="https://placekitten.com/214/375" alt="pretty kitty"> <img src="https://placekitten.com/286/268" alt="pretty kitty"> <img src="https://placekitten.com/288/388" alt="pretty kitty"> <img src="https://placekitten.com/235/246" alt="pretty kitty"> <img src="https://placekitten.com/213/389" alt="pretty kitty"> <img src="https://placekitten.com/276/304" alt="pretty kitty"> <img src="https://placekitten.com/216/354" alt="pretty kitty"> <img src="https://placekitten.com/252/371" alt="pretty kitty"> <img src="https://placekitten.com/328/350" alt="pretty kitty"> <img src="https://placekitten.com/381/339" alt="pretty kitty"> <img src="https://placekitten.com/292/259" alt="pretty kitty"> <img src="https://placekitten.com/216/285" alt="pretty kitty"> <img src="https://placekitten.com/337/371" alt="pretty kitty"> <img src="https://placekitten.com/335/382" alt="pretty kitty"> <img src="https://placekitten.com/245/345" alt="pretty kitty"> <img src="https://placekitten.com/307/306" alt="pretty kitty"> <img src="https://placekitten.com/258/363" alt="pretty kitty"> <img src="https://placekitten.com/293/390" alt="pretty kitty"> <img src="https://placekitten.com/355/221" alt="pretty kitty"> <img src="https://placekitten.com/330/205" alt="pretty kitty"> <img src="https://placekitten.com/234/383" alt="pretty kitty"> <img src="https://placekitten.com/329/200" alt="pretty kitty"> <img src="https://placekitten.com/303/362" alt="pretty kitty"> </section>