Build a grid with proper rows/columns and some aspect ratio sanity

architype.css

@@ -8,6 +8,10 @@
   --placeholder: #bbbbbb;
 }
 
+:root {
+  --editor-width: 320px;
+}
+
 body {
   position: fixed;
   top: 0;
@@ -21,6 +25,11 @@ body {
   width: 100%;
   height: 100%;
   font-family: 'Courier', monospace;
+
+  display: grid;
+  grid-template:
+      [row1-start] "editor grid" 100% [row1-end]
+      / var(--editor-width) auto;
 }
 
 .editor {
@@ -34,7 +43,7 @@ body {
   outline: 1px solid black;
 
   height: 100%;
-  width: 320px;
+  width: 100%;
 
   overflow-y: scroll;
 }
@@ -108,3 +117,10 @@ body {
 .editor .editor {
   margin: 5px;
 }
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  align-content: center;
+}

architype.js

@@ -27,6 +27,10 @@ class Architype {
     this.targets_.id = 'arch-targets';
     this.container_.appendChild(this.targets_);
 
+    this.grid_ = document.createElement('div');
+    this.grid_.classList.add('grid');
+    this.container_.appendChild(this.grid_);
+
     this.observer_ = new MutationObserver(e => { this.onEdit(e); });
     this.observer_.observe(editorElem, {
       attributes: true,
@@ -65,7 +69,7 @@ class Architype {
     // TODO: differentiate between value change and structure change
     localStorage.setItem('currentState', JSON.stringify(this.serialize()));
     this.graph_ = this.buildGraph();
-    console.log(this.graph_);
+    this.buildGrid();
     this.updateTargets();
   }
 
@@ -302,6 +306,15 @@ class Architype {
         max[1] - min[1] + 1,
     ];
   }
+
+  buildGrid() {
+    this.grid_.style.gridTemplateColumns =
+        'repeat(' + this.graph_.size[0] + ',1fr)';
+    this.grid_.style.gridTemplateRows =
+        'repeat(' + this.graph_.size[1] +
+        ',minmax(0, calc((100vw - var(--editor-width)) / ' +
+        this.graph_.size[0] + ')))';
+  }
 }
 
 class ListenUtils {