diff --git a/css/boxes.css b/css/boxes.css
index 15a3822..fd1781d 100644
--- a/css/boxes.css
+++ b/css/boxes.css
@@ -1,10 +1,12 @@
 .boxes-container {
   max-width: 800px;
   margin: 100px auto;
-  position: relative;
 }
-.boxes-container input{
-  height: 3.125%;
-  width: 3.125%;
+.boxes input{
   margin: 0;
+}
+.boxes{
+  display: grid;
+  grid-template-columns: repeat(32, 1fr); /* 32 equal columns */
+  grid-template-rows: repeat(32, 1fr); /* 32 equal rows */
 }
\ No newline at end of file
diff --git a/js/boxes.js b/js/boxes.js
index fa6632d..268bd98 100644
--- a/js/boxes.js
+++ b/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);
 })();
diff --git a/js/boxes.ts b/js/boxes.ts
index cde8ba8..5b35853 100644
--- a/js/boxes.ts
+++ b/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);
 })();
diff --git a/views/boxes.html b/views/boxes.html
index f8f215a..479db2f 100644
--- a/views/boxes.html
+++ b/views/boxes.html
@@ -10,8 +10,7 @@
     <input type="checkbox" id="game-of-life" />
   </label>
   <div class="boxes">
-    {{range .Boxes}}<label
-      ><input
+    {{range .Boxes}}<input
         type="checkbox"
         id="box-{{.Id}}"
         name="checked"
@@ -19,8 +18,7 @@
         .Value
         }}
         checked="true"
-        {{end}} /></label
-    >{{end}}
+        {{end}} />{{end}}
   </div>
 </div>