I am facing a challenge with my HTML/CSS (Bootstrap 5.0) code. My goal is to create a Pinterest-style Masonry card gallery using Bootstrap 5.0 grid system along with the Masonry library available at Masonry. However, I encounter an issue where the content overflows beyond the background container's height and the cards start stacking on top of each other until window resize occurs.
Is there a more effective way to implement a Masonry layout within Bootstrap 5.0 or can you spot any flaws in my code that could be causing this overflow/stacking problem? Please let me know if additional information or code is needed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
</head>
<body>
...
</body>
</html>
Non-Bootstrap CSS Properties
:root {
--light: #7C766A;
--dark: #4D473E;
...
}
.background-image{
background-image: url('...');
position: absolute;
...
}
a:link { color:var(--blue); }
...
@media (min-width: 576px) {
.h-sm-100 {
height: 100%;
}
}
@media (max-width: 600px) {
...
}
@media (min-width: 600px) {
...
}
Edit:
Here is an image illustrating the overflow/stacking issue: