File size: 1,763 Bytes
ded7cac |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html>
<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>
<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> |