Home
CSS
CSS Image Gallery
Tryit: Responsive image gallery example
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } div.gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; } div.gallery-item { margin: 5px; border: 1px solid #ccc; width: calc(25% - 20px); } div.gallery-item:hover { border: 1px solid #777; } div.gallery-item img { width: 100%; height: auto; } div.gallery-item div.desc { padding: 15px; text-align: center; } @media only screen and (max-width: 768px) { div.gallery-item { width: calc(50% - 20px); } } @media only screen and (max-width: 480px) { div.gallery-item { width: calc(100% - 20px); } } </style> </head> <body> <h2>Responsive Image Gallery</h2> <h4>Resize the browser window to see the effect!</h4> <div class="gallery"> <div class="gallery-item"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Cinque Terre</div> </div> <div class="gallery-item"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Green Forest</div> </div> <div class="gallery-item"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Northern Lights</div> </div> <div class="gallery-item"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Mountains</div> </div> </div> <p>Here we use media queries to re-arrange the images on different screen sizes:</p> <ul> <li>If screen is larger than 768px wide - show four images side by side</li> <li>If screen is smaller than 768px - show two images side by side</li> <li>If screens is smaller than 480px - stack the images vertically (100%)</li> </ul> <p><strong>Tip:</strong> You will learn more about media queries later in our CSS Tutorial.</p> </body> </html>
