<div class="grid__masonry"></div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
counter-reset: section;
font-family: "Exo", Arial, sans-serif;
font-size: 20px;
font-weight: 600;
padding: 10px;
box-sizing: border-box;
background-color: #222;
}
.item {
border-radius: 10px;
background-size: cover;
background-position: center;
height: 10em;
position: relative;
}
.item::before {
counter-increment: section;
content: counter(section);
background-image: radial-gradient(
50% 105%,
#fffff5 15%,
#fff3d5 31%,
#ffd484 100%
),
radial-gradient(51% 200%, #fffcf5 100%, rgba(251, 213, 142, 0) 100%),
radial-gradient(50% 103%, #ff5f49 15%, #ff1919 100%);
background-origin: border-box;
background-clip: padding-box, padding-box, border-box;
border: 2px solid transparent;
box-shadow: 0 2px 10px 0 rgba(96, 43, 43, 0.5);
border-radius: 50%;
padding: 10px;
font-size: 2em;
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
right: 10px;
bottom: 10px;
color: #fff;
text-shadow: 1px 0px 0 rgb(103 105 171), 0px 1px 0 rgb(221 17 17),
-1px 0px 0 rgb(113 12 206), 0px -1px 0 rgb(207 107 225),
2px 0px 0 rgb(103 105 171), 0px 2px 0 rgb(221 17 17),
-2px 0px 0 rgb(113 12 206), 0px -2px 0 rgb(207 107 225);
width: 48px;
height: 48px;
mix-blend-mode: difference;
filter: hue-rotate(180deg);
backdrop-filter: saturate(0.8);
}
.item:nth-child(2n) {
height: 14em;
}
.item:nth-child(3n) {
height: 18em;
}
.item:nth-child(4n) {
height: 22em;
}
.item:nth-child(5n) {
height: 24em;
}
.item:nth-child(6n) {
height: 30em;
}
.item:nth-child(7n) {
height: 34em;
}
.item:nth-child(8n) {
height: 40em;
}
.grid__masonry {
display: grid;
grid-template-rows: masonry;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
width: calc(100vw - 20px);
min-height: calc(100vh - 20px);
}
for (let i = 0; i <= 50; i++) {
const div = document.createElement("div");
div.classList.add("item");
div.style.backgroundImage = `url(https://picsum.photos/500/500?random=${i})`;
document.querySelector(".grid__masonry").appendChild(div);
}
let grids = [...document.querySelectorAll(".grid__masonry")];
if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== "masonry") {
grids = grids.map((grid) => ({
_el: grid,
gap: parseFloat(getComputedStyle(grid).gridRowGap),
items: [...grid.childNodes].filter(
(c) => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1
),
ncol: 0
}));
function layout() {
grids.forEach((grid) => {
/* get the post relayout number of columns */
let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(" ")
.length;
/* if the number of columns has changed */
if (grid.ncol !== ncol) {
/* update number of columns */
grid.ncol = ncol;
/* revert to initial positioning, no margin */
grid.items.forEach((c) => c.style.removeProperty("margin-top"));
/* if we have more than one column */
if (grid.ncol > 1) {
grid.items.slice(ncol).forEach((c, i) => {
let prev_fin = grid.items[i].getBoundingClientRect()
.bottom /* bottom edge of item above */,
curr_ini = c.getBoundingClientRect()
.top; /* top edge of current item */
c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`;
});
}
}
});
}
addEventListener(
"load",
(e) => {
layout(); /* initial load */
addEventListener("resize", layout, false); /* on resize */
},
false
);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.