HTML CSS

SIMPLE RESPONSIVE IMAGE GALLERY WITH HTML CSS

(a real quick example)

HTML <DIV> GALLERY

01

<div class="gallery">   <img src="images/IMG-1.JPG">   <img src="images/IMG-2.JPG">   <img src="images/IMG-3.JPG">  </div>

CSS GRID GALLERY

02

GRID LAYOUT - 3 IMAGES PER ROW * { box-sizing: border-box; } .gallery {   display: grid;   grid-template-columns: repeat(3, 1fr);  }

IMAGES DIMENSIONS & RESIZE .gallery img {   width: 100%;  height: 150px;   object-fit: contain;  }

SMALL SCREENS - 2 IMAGES PER ROW @media only screen and (max-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }