From 997b87c75a12597d23517f022b633b642d71c87a Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Sun, 25 Aug 2024 21:06:16 -0700 Subject: [PATCH] Make more consistent gap sizes Border-box sizing plus rounding the height to a multiple of gridRowHeight ensures the grid row span exactly fits the div, which results in more consistent gaps. --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 8708657..5216064 100644 --- a/index.html +++ b/index.html @@ -107,6 +107,7 @@ } div { + box-sizing: border-box; display: grid; place-items: center; border: 2px solid var(--text-color); @@ -169,7 +170,7 @@ const maximumDivHeight = window.innerHeight / 4; for (const div of main.children) { // Random height between 1/12 the viewport and 1/4 the viewport - const height = rng.pop() % (maximumDivHeight - minimumDivHeight) + minimumDivHeight; + const height = Math.ceil((rng.pop() % (maximumDivHeight - minimumDivHeight) + minimumDivHeight) / gridRowHeight) * gridRowHeight; const color = `hsl(${rng.pop() % 360}deg 40% 60%)`; div.style.setProperty('height', `${height}px`); @@ -177,7 +178,7 @@ // This is where the masonry layout is implemented. Since grid-template-rows is not set on
, // both row height and row count are implied by the children. - div.style.setProperty('grid-row-end', `span ${Math.ceil(height / gridRowHeight)}`); + div.style.setProperty('grid-row-end', `span ${height / gridRowHeight}`); } -- 2.47.3