box styles

css/boxes.css

@@ -1,10 +1,12 @@
 .boxes-container {
   max-width: 800px;
   margin: 100px auto;
-  position: relative;
 }
-.boxes-container input{
+.boxes input{
-  height: 3.125%;
-  width: 3.125%;
   margin: 0;
 }
+.boxes{
+  display: grid;
+  grid-template-columns: repeat(32, 1fr); /* 32 equal columns */
+  grid-template-rows: repeat(32, 1fr); /* 32 equal rows */
+}

js/boxes.js

@@ -49,4 +49,10 @@
     const golEl = document.querySelector("#game-of-life");
     handleGol(golEl);
     golEl.addEventListener("change", (e) => handleGol(e.target));
+    const container = document.querySelector('.boxes');
+    const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries.at(0);
+        container.style.height = String(entry?.contentRect.width ?? 500) + 'px';
+    });
+    resizeObserver.observe(container);
 })();

js/boxes.ts

@@ -63,4 +63,12 @@ type Box = {
   const golEl = document.querySelector("#game-of-life") as CheckboxEl;
   handleGol(golEl);
   golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl));
+
+
+  const container = document.querySelector('.boxes') as HTMLDivElement
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries.at(0);
+    container.style.height = String(entry?.contentRect.width ?? 500) + 'px';
+  });
+  resizeObserver.observe(container);
 })();

views/boxes.html

@@ -10,8 +10,7 @@
     <input type="checkbox" id="game-of-life" />
   </label>
   <div class="boxes">
-    {{range .Boxes}}<label
+    {{range .Boxes}}<input
-      ><input
         type="checkbox"
         id="box-{{.Id}}"
         name="checked"
@@ -19,8 +18,7 @@
         .Value
         }}
         checked="true"
-        {{end}} /></label
+        {{end}} />{{end}}
-    >{{end}}
   </div>
 </div>