| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <!-- <h1>✍️ Trying to have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout">Masonry layout</a></h1> | |
| <div class="image-container"> | |
| <img src="https://randompic.grozav.dev/api/random?1" alt="img1"> | |
| <img src="https://randompic.grozav.dev/api/random?2" alt="img2"> | |
| <img src="https://randompic.grozav.dev/api/random?3" alt="img3"> | |
| <img src="https://randompic.grozav.dev/api/random?4" alt="img4"> | |
| <img src="https://randompic.grozav.dev/api/random?5" alt="img5"> | |
| <img src="https://randompic.grozav.dev/api/random?6" alt="img6"> | |
| <img src="https://randompic.grozav.dev/api/random?7" alt="img7"> | |
| <img src="https://randompic.grozav.dev/api/random?8" alt="img8"> | |
| </div> --> | |
| <h1>✍️ Trying to have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout">Masonry layout</a></h1> | |
| <div class="image-container"> | |
| <img src="https://random.danielpetrica.com/api/random?1" alt="img1"> | |
| <img src="https://random.danielpetrica.com/api/random?2" alt="img2"> | |
| <img src="https://random.danielpetrica.com/api/random?3" alt="img3"> | |
| <img src="https://random.danielpetrica.com/api/random?4" alt="img4"> | |
| <img src="https://random.danielpetrica.com/api/random?5" alt="img5"> | |
| <img src="https://random.danielpetrica.com/api/random?6" alt="img6"> | |
| <img src="https://random.danielpetrica.com/api/random?7" alt="img7"> | |
| <img src="https://random.danielpetrica.com/api/random?8" alt="img8"> | |
| </div> | |
| <style> | |
| /* ------------------USE THIS----------------------------------- */ | |
| /* .image-container { | |
| columns: 250px auto; | |
| column-gap: 16px; | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| img { | |
| width: 100%; | |
| display: block; | |
| margin-bottom: 16px; | |
| opacity: 0.8; | |
| outline: auto; | |
| border-radius: 16px; | |
| cursor: pointer; | |
| } */ | |
| /* ----------------------------------OR THIS-------------------------- */ | |
| .image-container{ | |
| columns: 250px; | |
| } | |
| img{ | |
| margin: 4px; | |
| opacity: 80%; | |
| outline: auto; | |
| border-radius: 16px; | |
| cursor: pointer; | |
| width: 100%; | |
| display: block; | |
| margin-bottom: 16px; | |
| } | |
| </style> | |
| </body> | |
| </html> |