From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 26 Aug 2024 04:06:16 +0000 (-0700)
Subject: Make more consistent gap sizes
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=997b87c75a12597d23517f022b633b642d71c87a;p=minimal-masonry

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.
---

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 <main>,
       // 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}`);
     }
   </script>
 </body>