Added grid for results

css/components/page/results.css

@@ -1,5 +1,33 @@
+.results-container-padding {
+    width: 100%;
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #E3F0FF;
+
+}
 .results-container {
     display: grid;
     gap: 20px;
+    width: 90%;
+    grid-template-columns: 1fr 1fr;
     
+    grid-template-rows: repeat(6, calc((90vw / 2) - 20px));
+}
+.result-square {
+    background-color: red;
+}
+.result-portrait {
+    background-color: blue;
+    grid-row: span 2;
+}
+.result-landscape {
+    background-color: green;
+    grid-column: span 2;
+}
+.result-instagram {
+    background-color: yellow;
+    grid-column: span 2;
+    grid-row: span 2;
 }

src/components/page/results.rs

@@ -4,8 +4,28 @@ use yew::prelude::*;
 pub fn results_section() -> Html {
     
     html! {
+        <div class={"results-container-padding"}>
             <div class={"results-container"}>
+                <div class={"result-square"}>
 
                 </div>
+                <div class={"result-portrait"}>
+
+                </div>
+                <div class={"result-square"}>
+
+                </div>
+                <div class={"result-landscape"}>
+
+                </div>
+                <div class={"result-instagram"}>
+
+                </div>
+                <div class={"result-square"}>
+
+                </div>
+                <div class={"result-square"}></div>
+            </div>
+        </div>
     }
 }