Grid basico :3

src/index.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 
 import './styles/reset.css';
 import './styles/main.scss';
+import './styles/grid.scss';
 
 import {Nav} from "./components/Nav";
 import {SearchBar} from "./components/SearchBar";

src/styles/grid.scss

@@ -0,0 +1,32 @@
+.grid {
+  width: 100%;
+  padding-left: 1em;
+  padding-right: 1em;
+
+  .row {
+    display: flex;
+     & > * {
+       padding-left: 1em;
+       padding-right: 1em;
+     }
+
+    .col, col-1 {
+      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%;
+    }
+  }
+}

src/views/Recomended.jsx

@@ -91,13 +91,23 @@ export const Recomended = () => {
   // TODO crear una forma de obtener cosas populares
   // Esto es un por mientras hago todo el resto y la pagina de inicio no se vea tan vacia
   return (
-    <div>
+    <div class='grid'>
+      <div class='row'>
+        <div class='col'>
           <h3>Artistas Populares</h3>
           <PopularArtists/>
-      <h3>Discos Populares</h3>
+        </div>
-      <PopularDiscs/>
+        <div class='col'>
           <h3>Canciones Populares</h3>
           <PopularSongs/>
         </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <h3>Discos Populares</h3>
+          <PopularDiscs/>
+        </div>
+      </div>
+    </div>
   )
 }