use grid instead flex to structure the website

public/assets/css/general.css

+:root{
+    --row-height: calc((100vh - 300px)/4);
+}
+
 body {
     background-image: url('/assets/img/background.jpg');
     background-size: cover;
+    background-attachment: fixed;
 }
 
 body, html {
     margin: 0;
     padding: 0;
+    height: 100%
+}
+
+.main-wrapper {
+    padding: 30px;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .container-wrapper {
-    margin: 30px;
-    min-height: calc(100vh - 60px);
+    flex: 1;
     background-color: white;
     border-radius: 5px;
     opacity: 0.9;
@@ -32,11 +44,13 @@ body, html {
     margin: 10px;
 }
 
-#usercard {
+#usercard, #groupcard {
     width: 350px;
+    grid-row:1/3
 }
 
 .form_format {
+    grid-column: span 4 ;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -46,4 +60,42 @@ body, html {
 #icons_users {
     display: flex;
     justify-content: center;
+}
+
+#content {
+    display: grid;
+    grid-template-columns: 30% 25% 25%;
+    grid-gap: 2px;
+    grid-template-rows: repeat(4, var(--row-height));
+}
+
+#members{
+    grid-row: 3/5;
+    grid-column: 1/5;
+    max-height: 370px;
+}
+
+#usercard {
+    grid-column: 1/2;
+    grid-row:1/2
+}
+#map {
+    grid-row:1/3;
+    grid-column: 2/5;
+}
+
+#members_list {
+    max-height: 95%;
+}
+
+#groups {
+    grid-row: 2/5;
+    grid-column: 1/2;
+
+}
+
+#list {
+    overflow:scroll; 
+    grid-row:2/5;
+    grid-column: 1/5;
 }
\ No newline at end of file