Issue #16: Generalizacion de la grid

src/styles/grid.scss

@@ -1,34 +1,41 @@
 .grid {
+  --gutter: 1em;
   width: 100%;
-  padding-left: 1em;
-  padding-right: 1em;
 
   .row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-     & > * {
-       padding: .5em;
-       min-width: 300px;
-     }
 
-    .col, col-1 {
+    margin-top: calc(var(--gutter) * -1);
+    margin-right: calc(var(--gutter) / -2);
+    margin-left: calc(var(--gutter) / -2);
+
+    & > * {
+      flex-shrink: 0;
+      width: 100%;
+      max-width: 100%;
+
+      padding-right: calc(var(--gutter) / 2);
+      padding-left: calc(var(--gutter) / 2);
+      margin-top: var(--gutter);
+    }
+
+    .col {
       flex: 1 0 0%;
     }
-    .col-2 {
-      flex: 2 0 0%;
-    }
-    .col-3 {
-      flex: 3 0 0%;
-    }
-    .col-4 {
-      flex: 4 0 0%;
-    }
-    .col-5 {
-      flex: 5 0 0%;
-    }
-    .col-6 {
-      flex: 6 0 0%;
+
+    @for $i from 1 through 6 {
+      .col-#{$i} {
+        flex: 1 0 auto;
+        width: percentage($i / 6);
+      }
     }
   }
 }
+
+@media (max-width: 768px) {
+  .grid .row {
+    display: block;
+  }
+}