I've been experimenting with creating a grid layout where the bottom image will move up until it is 10px away from the image directly above it. However, no matter what I attempt, the spacing seems to be based on the tallest image rather than the one above. Since my images vary in size, I'm aiming for a more aesthetically pleasing layout without them looking randomly spaced.
I've tried numerous solutions without success.
.left {
display: block;
width: 50%;
text-align: left;
}
.right {
display: block;
margin-left: auto;
width: 50%;
text-align: right;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
}
.rounded20 {
border-radius: 20px;
padding-right:5px
}
.margin-side {
margin-right:5px;
margin-left: 5px;
padding-right:5px;
padding-left: 5px;
}
.below-image {
margin-top: 10px; /* Adjust the margin as needed */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Wolfy</title>
<link rel="icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaaeb4aab4aa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar {
padding-bottom: 0;
}
.margin-side {
margin-left: 20px;
margin-right: 20px;
}
.rounded20 {
border-radius: 20px;
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-gap: 10px; /* Set the gap between images to 10px */
justify-content: flex-start;
align-items: flex-start;
}
.image-grid img {
border-radius: 20px;
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
margin-bottom: -10px; /* Add negative bottom margin to scoot up the image */
}
</style>
</head>
<body class="bg-dark">
<nav class="navbar navbar-light navy-blue1 main-text rounded">
<a href="../index.html" class="brand-text text-light">Wolfy</a>
<a href="#" class="left text-light">Images</a>
<img src="../images/Wolfy-banner.png" class="right banner mb-0">
</nav>
<br>
<br>
<div class="container">
<div class="image-grid">
<img src="../images/wolfy1.jpg" class="rounded20 margin-side">
<img src="../images/wolfy3.jpg" class="rounded20 margin-side">
<img src="../images/wolfy4.jpg" class="rounded20 margin-side">
<img src="../images/wolfy5.jpg" class="rounded20 margin-side">
<img src="../images/wolfy12.jpg" class="rounded20 margin-side">
<img src="../images/wolfy13.jpg" class="rounded20 margin-side">
</div>
</div>
</body>
</html>No JavaScript has been implemented. I am utilizing WebStorm EAP by the way.
My desired outcome is:
This is what I currently have: