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

@@ -30,7 +30,7 @@ const PopularArtists = () => {
     'items': items
   }];
   return <EntityList list={list}/>
-  }
+}
 }
 
 const PopularDiscs = () => {
@@ -52,12 +52,12 @@ const PopularDiscs = () => {
     'title': disc.title,
     'subtitle': disc.artist.name,
     'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-    }));
+}));
-    const list = [{
+const list = [{
   'items': items
-    }];
+}];
-    return <EntityList list={list}/>
+return <EntityList list={list}/>
-  }
+}
 }
 
 const PopularSongs = () => {
@@ -84,20 +84,30 @@ const PopularSongs = () => {
     'items': items
   }];
   return <EntityList list={list}/>
-  }
+}
 }
 
 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>
   )
 }