Switch the move buttons to a css-grid layout

satiate.css

@@ -327,15 +327,17 @@ a:hover {
 }
 
 #move-holder {
+  width: 90%;
+  height: 90%;
   position: absolute;
-  left: 50%;
-  margin-left: -100px;
   top: 5%;
-}
-
-.move-button {
-  width: 200px;
-  height: 50px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto auto;
+  column-gap: 8pt;
+  row-gap: 8pt;
 }
 
 .move-button {
@@ -346,78 +348,58 @@ a:hover {
   font-size: 24px;
 }
 
-.move-button:focus {
-  outline: 0px;
-}
-
-.disabled {
-  background-color: #444;
-  border: none;
-}
-
-.missing {
-  background-color: #444;
-  color: #aaa !important;
-}
-
 #move-up-left {
-  position: absolute;
-  left: -140px;
-  top: 60px;
+  grid-column-start: 1;
 }
 
 #move-up {
-  position: absolute;
-  left: 0px;
-  top: 0px;
+  grid-column-start: 2;
 }
 
 #move-up-right {
-  position: absolute;
-  left: 140px;
-  top: 60px;
+  grid-column-start: 3;
 }
 
 #move-left {
-  position: absolute;
-  left: -200px;
-  top: 120px;
+  grid-column-start: 1;
 }
 
 #move-right {
-  position: absolute;
-  left: 200px;
-  top: 120px;
+  grid-column-start: 3;
 }
 
 #move-down-left {
-  position: absolute;
-  left: -140px;
-  top: 180px;
+  grid-column-start: 1;
 }
 
 #move-down {
-  position: absolute;
-  left: 0px;
-  top: 240px;
+  grid-column-start: 2;
 }
 
 #move-down-right {
-  position: absolute;
-  left: 140px;
-  top: 180px;
+  grid-column-start: 3;
 }
 
 #move-ascend {
-  position: absolute;
-  left: -200px;
-  top: 300px;
+  grid-column-start: 1;
 }
 
 #move-descend {
-  position: absolute;
-  left: 200px;
-  top: 300px;
+  grid-column-start: 3;
+}
+
+.move-button:focus {
+  outline: 0px;
+}
+
+.disabled {
+  background-color: #444;
+  border: none;
+}
+
+.missing {
+  background-color: #444;
+  color: #aaa !important;
 }
 
 #area-name {