debut css accueil

web/themes/custom/quartiers_de_demain/scss/global/_layout.scss

@@ -29,6 +29,11 @@ $width-menu-slidedown : 550px;
     }
     main{
         width: 100%;
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
     }
     .content_container{
 
@@ -37,37 +42,39 @@ $width-menu-slidedown : 550px;
     }
 }
 
-// .layout-content{
-//     order: 2;
-//     padding-top: 3rem;
-//     padding-bottom: 6rem;
-//     width: 70%;
-//     margin: auto;
-//     @media(max-width: 891px){
-//         width: 90%;
-//     }
-//     @media (max-width:500px) {
-//        padding-top: 0;
-//     }
+.layout-content{
+    grid-column: 3 /span 10;
+    order: 2;
+    padding-top: 3rem;
+    padding-bottom: 6rem;
+    // width: 70%;
+    margin: auto;
+    @media(max-width: 891px){
+        width: 90%;
+    }
+    @media (max-width:500px) {
+       padding-top: 0;
+    }
 
         
-// }
+}
 
-// aside{
-//     width: 20%;
-//     order: 1;
-//     margin-top: 5rem;
-//     margin-left: 10%;
-//     margin-right: 1rem;
-//     @media(max-width:891px){
-//         margin-left: 5%;
-//         margin-top: 9rem;
-//     }
-//     @media (max-width:500px) {
-//         width: 80%;
-//         margin-top: 3rem;
-//     }
-// }
+aside{
+    grid-column: 1 /span 2;
+    // width: 80%;
+    order: 1;
+    margin-top: 5rem;
+    // margin-left: 10%;
+    // margin-right: 1rem;
+    @media(max-width:891px){
+        margin-left: 5%;
+        margin-top: 9rem;
+    }
+    @media (max-width:500px) {
+        width: 80%;
+        margin-top: 3rem;
+    }
+}
 // main{
 //     width: 100%;
 //     display: flex;