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

@@ -8,15 +8,15 @@ import {CoverArt} from '../components/CoverArt';
 
 const PopularArtists = () => {
   const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
-                     '27e2997f-f7a1-4353-bcc4-57b9274fa9a4', '2de794c8-8826-48d0-90e0-6900183ba9e0']
+  '27e2997f-f7a1-4353-bcc4-57b9274fa9a4', '2de794c8-8826-48d0-90e0-6900183ba9e0']
   let [artists, setArtists] = useState(null);
 
   if(!artists) {
     Promise.all([getArtist(artistIDs[0]),
-                 getArtist(artistIDs[1]),
-                 getArtist(artistIDs[2]),
-                 getArtist(artistIDs[3])])
-           .then(artists => setArtists(artists));
+    getArtist(artistIDs[1]),
+    getArtist(artistIDs[2]),
+    getArtist(artistIDs[3])])
+    .then(artists => setArtists(artists));
     return <EntityList placeholder={true} size={4}/>
   }else {
     const items = artists.map((artist) => ({
@@ -25,52 +25,52 @@ const PopularArtists = () => {
       'title': artist.name,
       'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
       'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-    }));
-    const list = [{
-      'items': items
-    }];
-    return <EntityList list={list}/>
-  }
+  }));
+  const list = [{
+    'items': items
+  }];
+  return <EntityList list={list}/>
+}
 }
 
 const PopularDiscs = () => {
   const discsIDs = ['f5cc15ea-67a8-3c6b-9887-d45ae13a3156', 'db6a41da-710b-36eb-a288-48b4b1c5b130',
-                     'd9f1ba4b-dfaf-4961-8f97-63c149b361a0', '495ab548-ef52-4dcf-a226-bc70b1ad7c86']
+  'd9f1ba4b-dfaf-4961-8f97-63c149b361a0', '495ab548-ef52-4dcf-a226-bc70b1ad7c86']
   let [discs, setDiscs] = useState(null);
 
   if(!discs) {
     Promise.all([getDisc(discsIDs[0]),
-                 getDisc(discsIDs[1]),
-                 getDisc(discsIDs[2]),
-                 getDisc(discsIDs[3])])
-           .then(discs => setDiscs(discs));
+    getDisc(discsIDs[1]),
+    getDisc(discsIDs[2]),
+    getDisc(discsIDs[3])])
+    .then(discs => setDiscs(discs));
     return <EntityList placeholder={true} size={4}/>
   }else {
     const items = discs.map((disc) => ({
       'cover': <CoverArt disc={disc}/>,
-      'link': `/disc/${disc.id}`,
-      'title': disc.title,
-      'subtitle': disc.artist.name,
-      'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-    }));
-    const list = [{
-      'items': items
-    }];
-    return <EntityList list={list}/>
-  }
+    'link': `/disc/${disc.id}`,
+    'title': disc.title,
+    'subtitle': disc.artist.name,
+    'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
+}));
+const list = [{
+  'items': items
+}];
+return <EntityList list={list}/>
+}
 }
 
 const PopularSongs = () => {
   const songsIDs = ['1e49a0d0-372e-459d-9c53-5d864186bb02', '5892ed7d-fed4-4f00-b72e-af1315fcb62d',
-                    '4d6473d8-a21b-47c0-9d2e-00d210d68f3a', '92b00514-f535-4b32-99ea-d74b9ccb416b']
+  '4d6473d8-a21b-47c0-9d2e-00d210d68f3a', '92b00514-f535-4b32-99ea-d74b9ccb416b']
   let [songs, setSongs] = useState(null);
 
   if(!songs) {
     Promise.all([getSong(songsIDs[0]),
-                 getSong(songsIDs[1]),
-                 getSong(songsIDs[2]),
-                 getSong(songsIDs[3])])
-           .then(songs => setSongs(songs));
+    getSong(songsIDs[1]),
+    getSong(songsIDs[2]),
+    getSong(songsIDs[3])])
+    .then(songs => setSongs(songs));
     return <EntityList placeholder={true} size={4}/>
   }else {
     const items = songs.map((song) => ({
@@ -79,25 +79,35 @@ const PopularSongs = () => {
       'title': song.title,
       'subtitle': song.artist.name,
       'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
-    }));
-    const list = [{
-      'items': items
-    }];
-    return <EntityList list={list}/>
-  }
+  }));
+  const list = [{
+    '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>
-      <h3>Artistas Populares</h3>
-      <PopularArtists/>
-      <h3>Discos Populares</h3>
-      <PopularDiscs/>
-      <h3>Canciones Populares</h3>
-      <PopularSongs/>
+    <div class='grid'>
+      <div class='row'>
+        <div class='col'>
+          <h3>Artistas Populares</h3>
+          <PopularArtists/>
+        </div>
+        <div class='col'>
+          <h3>Canciones Populares</h3>
+          <PopularSongs/>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <h3>Discos Populares</h3>
+          <PopularDiscs/>
+        </div>
+      </div>
     </div>
   )
 }