<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Gallery</title> <style> .row { display: flex; flex-wrap: wrap; padding: 0 4px; }
.column { flex: 25%; max-width: 25%; padding: 0 4px; }
.column img { margin-top: 10px; vertical-align: middle; width: 100%; border-radius: 8px; }
@media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } }
@media screen and (max-width: 500px) {
.column { flex: 100%; max-width: 100%; } } </style> </head> <body>
<h1 style="text-align:center;">Flexbox Image Gallery</h1>
<div class="row"> <div class="column"> <img src="https://i.pinimg.com/1200x/12/9b/76/129b7630baa815012a13afb634f96d36.jpg"> <img src="https://i.pinimg.com/1200x/60/a0/e1/60a0e1338cac09b2457564b98b4504a5.jpg"> <img src="https://i.pinimg.com/736x/e5/79/9f/e5799f71358fc931b962137abe551483.jpg"> <img src="https://i.pinimg.com/736x/16/24/f9/1624f978c1b40c05ca65d31656d44fe7.jpg"> </div>
<div class="column"> <img src="https://i.pinimg.com/736x/16/24/f9/1624f978c1b40c05ca65d31656d44fe7.jpg"> <img src="https://i.pinimg.com/736x/e5/79/9f/e5799f71358fc931b962137abe551483.jpg"> <img src="https://i.pinimg.com/1200x/12/9b/76/129b7630baa815012a13afb634f96d36.jpg"> <img src="https://i.pinimg.com/1200x/60/a0/e1/60a0e1338cac09b2457564b98b4504a5.jpg"> </div>
<div class="column"> <img src="https://i.pinimg.com/1200x/60/a0/e1/60a0e1338cac09b2457564b98b4504a5.jpg"> <img src="https://i.pinimg.com/736x/16/24/f9/1624f978c1b40c05ca65d31656d44fe7.jpg"> <img src="https://i.pinimg.com/1200x/12/9b/76/129b7630baa815012a13afb634f96d36.jpg"> <img src="https://i.pinimg.com/736x/e5/79/9f/e5799f71358fc931b962137abe551483.jpg"> </div> </div>
</body> </html>