created grid system

src/App.scss

@@ -10,5 +10,6 @@
 @import "./sass/components/button";
 
 @import "./sass/layout/header";
+@import "./sass/layout/grid";
 
 @import "./sass/pages/home";

src/sass/abstracts/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

src/sass/abstracts/_variables.scss

@@ -1,3 +1,4 @@
+// COLORS
 $color-primary: #55c57a;
 $color-primary-light: #55c57a;
 $color-primary-dark: #28b485;
@@ -5,3 +6,8 @@ $color-primary-dark: #28b485;
 $color-grey-dark: #777;
 $color-white: #fff;
 $color-black: #000;
+
+// GRID background
+$grid-width: 114rem;
+$gutter-vertical: 8rem;
+$gutter-horizontal: 6rem;

src/sass/layout/_grid.scss

@@ -0,0 +1,51 @@
+.row {
+  max-width: $grid-width;
+  background-color: #eee;
+  margin: 0 auto;
+
+  &:not(:last-child) {
+    margin-bottom: $gutter-vertical;
+  }
+
+  @include clearfix;
+
+  [class^="col-"] {
+    background-color: orangered;
+    float: left;
+    color: $color-white;
+
+    &:not(:last-child) {
+      margin-right: $gutter-horizontal;
+    }
+  }
+
+  .col-1-of-2 {
+    width: calc((100% - #{$gutter-horizontal}) / 2);
+  }
+
+  .col-1-of-3 {
+    width: calc((100% - (2 * #{$gutter-horizontal})) / 3);
+  }
+
+  .col-1-of-4 {
+    width: calc((100% - (3 * #{$gutter-horizontal})) / 4);
+  }
+
+  .col-2-of-3 {
+    width: calc(
+      2 * ((100% - (2 * #{$gutter-horizontal})) / 3) + #{$gutter-horizontal}
+    );
+  }
+
+  .col-2-of-4 {
+    width: calc(
+      2 * ((100% - (3 * #{$gutter-horizontal})) / 4) + #{$gutter-horizontal}
+    );
+  }
+
+  .col-3-of-4 {
+    width: calc(
+      3 * ((100% - (3 * #{$gutter-horizontal})) / 4) + 2 * #{$gutter-horizontal}
+    );
+  }
+}