diff --git a/public/css/app.css b/public/css/app.css
index 46c4133..9ab4cfd 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -31,6 +31,188 @@ a {
   margin-right: 20px;
 }
 
+.start {
+  justify-content: flex-start;
+}
+
+.center {
+  justify-content: center;
+}
+
+.end {
+  justify-content: flex-end;
+}
+
+.v-center {
+  align-items: center;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+/*
+// ENABLE FOR DEV OR FOR DEMONSTRATION
+
+.col{
+    border: 3px solid red;
+}
+.row{
+    border: 3px solid green;
+}
+*/
+
+@media screen and (min-width: 600px) {
+  .s1 {
+    width: calc(1 * 8.334%);
+  }
+
+  .s2 {
+    width: calc(2 * 8.334%);
+  }
+
+  .s3 {
+    width: calc(3 * 8.334%);
+  }
+
+  .s4 {
+    width: calc(4 * 8.334%);
+  }
+
+  .s5 {
+    width: calc(5 * 8.334%);
+  }
+
+  .s6 {
+    width: calc(6 * 8.334%);
+  }
+
+  .s7 {
+    width: calc(7 * 8.334%);
+  }
+
+  .s8 {
+    width: calc(8 * 8.334%);
+  }
+
+  .s9 {
+    width: calc(9 * 8.334%);
+  }
+
+  .s10 {
+    width: calc(10 * 8.334%);
+  }
+
+  .s11 {
+    width: calc(11 * 8.334%);
+  }
+
+  .s12 {
+    width: calc(12 * 8.334%);
+  }
+}
+
+@media screen and (min-width: 600px) and (max-width: 992px) {
+  .m1 {
+    width: calc(1 * 8.334%);
+  }
+
+  .m2 {
+    width: calc(2 * 8.334%);
+  }
+
+  .m3 {
+    width: calc(3 * 8.334%);
+  }
+
+  .m4 {
+    width: calc(4 * 8.334%);
+  }
+
+  .m5 {
+    width: calc(5 * 8.334%);
+  }
+
+  .m6 {
+    width: calc(6 * 8.334%);
+  }
+
+  .m7 {
+    width: calc(7 * 8.334%);
+  }
+
+  .m8 {
+    width: calc(8 * 8.334%);
+  }
+
+  .m9 {
+    width: calc(9 * 8.334%);
+  }
+
+  .m10 {
+    width: calc(10 * 8.334%);
+  }
+
+  .m11 {
+    width: calc(11 * 8.334%);
+  }
+
+  .m12 {
+    width: calc(12 * 8.334%);
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .l1 {
+    width: calc(1 * 8.334%);
+  }
+
+  .l2 {
+    width: calc(2 * 8.334%);
+  }
+
+  .l3 {
+    width: calc(3 * 8.334%);
+  }
+
+  .l4 {
+    width: calc(4 * 8.334%);
+  }
+
+  .l5 {
+    width: calc(5 * 8.334%);
+  }
+
+  .l6 {
+    width: calc(6 * 8.334%);
+  }
+
+  .l7 {
+    width: calc(7 * 8.334%);
+  }
+
+  .l8 {
+    width: calc(8 * 8.334%);
+  }
+
+  .l9 {
+    width: calc(9 * 8.334%);
+  }
+
+  .l10 {
+    width: calc(10 * 8.334%);
+  }
+
+  .l11 {
+    width: calc(11 * 8.334%);
+  }
+
+  .l12 {
+    width: calc(12 * 8.334%);
+  }
+}
+
 .materialize-red {
   background-color: #e51c23 !important;
 }
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 9897f45..d8ce2de 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -2,6 +2,7 @@
 @import 'softbox';
 @import 'choicebox';
 @import 'home';
+@import 'grille';
 // MATERIALIZE CSS
 @import 'materialize/sass/materialize.scss';