From fefc542d4a978655ff2a910b9e30d9f7f79b5611 Mon Sep 17 00:00:00 2001
From: Max Stevenson <maxstevenson@msn.com>
Date: Fri, 29 May 2020 19:22:51 +0100
Subject: [PATCH] Grid layout implemented.

---
 app.css    | 16 ++++++++++++++--
 index.html |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app.css b/app.css
index 6faacd8..d0aeac1 100644
--- a/app.css
+++ b/app.css
@@ -156,17 +156,18 @@
 }
 
 #console-display {
-  width: fit-content;
+  grid-area: 4 / 1 / 5 / 2;
 }
+
 #console-display > .outer-container__two {
   padding: 5px 10px;
 }
 
 .room-info__container {
+  grid-area: 3 / 1 / 4 / 4;
   background-color: #e2eb57;
   padding: 3px;
   display: flex;
-  width: fit-content;
 }
 
 .room-info__level-display {
@@ -219,6 +220,10 @@
   margin: 5px 8px 0px 8px;
 }
 
+#map-display {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
 .map-display__container {
   width: 500px;
   border-bottom: 8px solid #438149;
@@ -252,6 +257,13 @@
   text-align: center;
 }
 
+#grid-container {
+  display: grid;
+  grid-template-rows: auto auto auto auto;
+  grid-template-columns: auto auto;
+  justify-items: stretch;
+}
+
 h1 {
   max-width: fit-content;
   background: #438149;
diff --git a/index.html b/index.html
index 9a534a3..c737bf8 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <div class="outer-container__one">
       <div class="outer-container__two">
         <div class="inner-container__one">
-          <div class="inner-container__two">
+          <div class="inner-container__two" id="grid-container">
             <div class="outer-container__one" id="map-display">
               <div class="outer-container__two">
                 <div class="map-display__container">