css grid home

web/themes/custom/reha/css/reha.css

@@ -319,10 +319,15 @@ input {
     margin: 0;
     line-height: 0.6; }
   .home-page-layout-content .layout--onecol .block-region-content {
-    display: flex;
-    flex-wrap: wrap; }
+    display: grid;
+    grid-column: repeat(2, 1fr); }
+    .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 {
+      grid-column: 1 /span 2;
+      grid-row: 1; }
     .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
-      width: 35%;
+      grid-column: 1;
+      grid-row: 2 /span 2;
+      width: 90%;
       border: solid #fdc300 1px;
       background-color: white;
       font-weight: 800;
@@ -350,18 +355,32 @@ input {
           padding-left: 1rem;
           content: url(../images/noun-arrow-1569918.svg); }
     .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d {
-      width: 45%;
+      margin-bottom: 1rem;
+      grid-column: 2;
+      grid-row: 2;
+      width: 90%;
       height: fit-content;
       display: flex;
       justify-content: flex-end; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d .field--type-file {
+        width: 100%;
+        margin: 0; }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d :hover {
         background-color: #fdc300; }
     .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 {
-      width: 45%;
+      grid-column: 2;
+      grid-row: 3;
+      width: 90%;
       display: flex;
       justify-content: flex-end; }
+      .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 .field--type-file {
+        width: 100%;
+        margin: 0; }
       .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover {
         background-color: #fdc300; }
+    .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-2 {
+      grid-column: 1 /span 2;
+      grid-row: 4; }
 
 .user--register h1 {
   font-size: 3rem !important;

web/themes/custom/reha/scss/pages/_home.scss

@@ -20,10 +20,22 @@
 
         }
         .block-region-content{
-            display: flex;
-            flex-wrap: wrap;
+            // display: flex;
+            // flex-wrap: wrap;
+            display: grid;
+            grid-column: repeat(2, 1fr);
+            .block-views-blockhome-block-1{
+                grid-column: 1 /span 2;
+                grid-row: 1;
+            }
+
+
+            // grid-row: ;
             .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f{
-                width: 35%;
+
+                grid-column: 1;
+                grid-row: 2 /span 2;
+                width: 90%;
                 border: solid $yellow-puca 1px;
                 background-color: $white-button;
                 font-weight: 800;
@@ -63,22 +75,39 @@
             }
     
             .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d{
-                width: 45%;
+                margin-bottom: 1rem;
+                grid-column: 2;
+                grid-row: 2;
+                width: 90%;
                 height: fit-content;
                 display: flex;
                 justify-content: flex-end;  
+                .field--type-file{
+                    width: 100%;
+                    margin: 0;
+                }
                 :hover{
                     background-color: $yellow-puca;
                 }
             }
             .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252{
-                width: 45%;
+                grid-column: 2;
+                grid-row: 3;
+                width: 90%;
                 display: flex;
-                justify-content: flex-end;     
+                justify-content: flex-end;   
+                .field--type-file{
+                    width: 100%;
+                    margin: 0;
+                }
                 :hover{
                     background-color: $yellow-puca;
                 }
             }
+            .block-views-blockhome-block-2{
+                grid-column: 1 /span 2;
+                grid-row: 4;
+            }
         }
     }