Gebäudeplan für Navigation angefangen

src/app/navigation/navigation.component.css

 .rectangle {
-    height: 50px;
-    width: 100px;
+    height: 70px;
+    width: 70%;
     background-color: #555;
-    float: left;
-    margin-right: 3.33333%;
   }
 
 .rectangle_big {
-    height: 50px;
-    width: 200px;
-    background-color: #555;
-    float: left;
-    margin-right: 3.33333%;    
+    height: 70px;
+    width: 70%;
+    background-color: #555; 
 }
 
 .square {
-    height: 70px;
-    width: 70px;
+    height: 100px;
+    width: 50%;
     background-color: #555;
-    margin-right: 3.33333%;   
-    margin-bottom: 80px;
-    margin-top: 80px;  
+}
+
+.container_1 { 
+    display: grid; 
+    grid-template-rows: 200px; 
+    grid-template-columns: 25% 25% 50%; 
+}
+
+.container_2 {
+    display: grid; 
+    grid-template-rows: 200px; 
+    grid-template-columns: 25% 25% 20% 20% 5%; 
+}
+
+.container_3 {
+    display: grid;
+    grid-template-rows: 200px;
+    grid-template-columns:
 }
 
 p {

src/app/navigation/navigation.component.html

-<div class="rectangle">
-    <p align="center">A</p>
-</div>
+<h2><b>Gebäudeplan der TH Deggendorf: </b></h2>
+<h3>Klicken Sie die Gebäude an, um Informationen zu einzelnen Räumen und der dazugehörigen Fakultät zu bekommen.</h3>
+<div align="center">
+    <div class="container_1">
+        <div>
+            <div class="rectangle">
+                <p align="center">A</p>
+            </div>
+        </div>
+        <div>
+            <div class="rectangle">
+                <p align="center">B</p>
+            </div>
+        </div>
+        <div>
+            <div class="rectangle_big">
+                <p align="center">C</p>
+            </div>
+        </div>
+    </div>
 
-<div class="rectangle">
-    <p align="center">B</p>
-</div>
-
-<div class="rectangle_big">
-    <p align="center">C</p>
-</div>
-<br>
-<div class="square">
-    <p align="center">C</p>
-</div>
+    <div class="container_2">
+        <div>
+            <div class="square">
+                <p align="center">F</p>
+            </div>
+        </div>
+        <div></div>
+        <div></div>
+        <div>
+            <div class="square">
+                <p align="center">G</p>
+            </div>
+        </div>
+        <div></div>
+    </div>
+</div>
\ No newline at end of file