Issue #16: Grid en search y recomended

src/components/Grid.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import './Grid.scss';
+
+export const Col = (props) => {
+ return <div className="col">{props.children}</div>
+}
+
+export const Row = (props) => {
+ return <div className="row">{props.children}</div>
+}
+
+export const Grid = (props) => {
+ return <div className="grid">{props.children}</div>
+}

src/components/Grid.scss

@@ -0,0 +1,41 @@
+.grid {
+  --gutter: 1rem;
+  width: 100%;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    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%;
+    }
+
+    @for $i from 1 through 6 {
+      .col-#{$i} {
+        flex: 1 0 auto;
+        width: percentage($i / 6);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .grid .row {
+    display: block;
+  }
+}

src/components/SearchBar.scss

@@ -1,7 +1,4 @@
 .searchbar {
-  margin-bottom: 2em;
-  margin-top: 1em;
-
   input {
     border: var(--line-width) solid var(--accent);
     border-right: none;