title: React Material UI - Responsive CardMedia
body: <p>Currently, I am trying to build a gallery using React Material UI (with <a href="https://material-ui.com/components/cards/" rel="nofollow noreferrer">Card</a>, ...).
  I have some issues to make the gallery responsive, as I might have different cover sizes :</p>
  <p><a href="https://i.stack.imgur.com/2n6vf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2n6vf.png" alt="enter image description here" /></a></p>
  <p>Here is the code I used :</p>
  <p>My card implementation :</p>
  <pre><code>import React from &quot;react&quot;;
  import { makeStyles } from '@material-ui/core/styles';
  
  import Card from &quot;@material-ui/core/Card&quot;;
  import CardMedia from &quot;@material-ui/core/CardMedia&quot;;
  import CardActionArea from '@material-ui/core/CardActionArea';
  
  const useStyles = makeStyles((theme) =&gt; ({
      gameRoot: {
          position: &quot;relative&quot;,
          height: &quot;100%&quot;
      },
      gameCover: {
          zIndex: 1
      }
  }));
  
  function CardEntry(props) {
      const {game} = props;
      const classes = useStyles(props);
  
      function watchGame() {
         // some redirecting stuff not needed for this POC
      }
  
      return (
          &lt;Card className={classes.gameRoot}&gt;
  
                  &lt;CardActionArea onClick={watchGame}&gt;
                      &lt;CardMedia
                          component=&quot;img&quot;
                          className={classes.gameCover}
                          image={game.imagePath}
                          title={game.title}
                      /&gt;
                  &lt;/CardActionArea&gt;
              
          &lt;/Card&gt;
      );
  
  }
  
  export default CardEntry;
  </code></pre>
  <p>Which is called by the HOC Gallery I have :</p>
  <pre><code>import React from &quot;react&quot;;
  
  import { makeStyles } from '@material-ui/core/styles';
  
  import Grid from &quot;@material-ui/core/Grid&quot;;
  import CardEntry from &quot;./CardEntry&quot;;
  
  // To dynamically change the number of items depending of browser
  const useStyles = makeStyles((theme) =&gt; ({
      // inspired by the settings https://www.youtube.com/gaming uses ;)
      gameEntry: {
          // 2 items on [0, sm]
          [theme.breakpoints.only('xs')]: {
              &quot;flex-basis&quot;: &quot;calc((100% / 2) - 1%)&quot;
          },
          // 4 items on [sm, md[
          [theme.breakpoints.only('sm')]: {
              &quot;flex-basis&quot;: &quot;calc((100% / 4) - 1%)&quot;
          },
          // 8 items on [md, infinity]
          [theme.breakpoints.up('md')]: {
              &quot;flex-basis&quot;: &quot;calc((100% / 8) - 1%)&quot;
          },
      }
  }));
  
  // The gallery component
  function GamesGallery(props) {
      const classes = useStyles(props);
  
      const currentGames = [/*See comment below*/]
  
      return (
          &lt;Grid
              container
              spacing={1}
              style={
                  {
                      rowGap: &quot;15px&quot;
                  }
              }
          &gt;
              {
                  currentGames
                      .map(game =&gt; 
                              &lt;Grid 
                                  key={game.playlistId ?? game.videoId} 
                                  item 
                                  className={classes.gameEntry}
                              &gt;
                                  &lt;CardEntry game={game}/&gt;
                              &lt;/Grid&gt;
                      )
              }
          &lt;/Grid&gt;
      );
  }
  </code></pre>
  <p>For testing, here is some data (with corner cases) I could have in <code>currentGames</code> variable :</p>
  <pre class="lang-json prettyprint-override"><code>[
     {
        &quot;title&quot;: &quot;Astérix &amp; Obélix XXL&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ7hPe8RxhK3FTXoqdFNL0BG/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ7hPe8RxhK3FTXoqdFNL0BG&quot;
     },
     {
        &quot;title&quot;: &quot;Astérix &amp; Obélix XXL 2&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ6FTJ2LSrdL4MaFM1Pl5nfo/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ6FTJ2LSrdL4MaFM1Pl5nfo&quot;
     },
     {
        &quot;title&quot;: &quot;Astérix &amp; Obélix XXL 2 : Mission Ouifix&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ6lDdIcNMFKsCzWtItCEcBq/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ6lDdIcNMFKsCzWtItCEcBq&quot;
     },
     {
        &quot;title&quot;: &quot;Beyond Good &amp; Evil&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ7GRN3EnqBEvfki5uAKiw5Z/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ7GRN3EnqBEvfki5uAKiw5Z&quot;
     },
     {
        &quot;title&quot;: &quot;Bully&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ4l1G59ZVCUuTuZ-btLpPnm/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ4l1G59ZVCUuTuZ-btLpPnm&quot;
     },
     {
        &quot;title&quot;: &quot;Chicken Invaders 5 - Cluck of the dark side&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ5x3Al4O71diHmivHNIRn2B/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ5x3Al4O71diHmivHNIRn2B&quot;
     },
     {
        &quot;title&quot;: &quot;Guns Gore &amp; Cannoli&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ6oiHK7lfTbOQlMWVHecx2I/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ6oiHK7lfTbOQlMWVHecx2I&quot;
     },
     {
        &quot;title&quot;: &quot;Guns Gore &amp; Cannoli 2&quot;,
        &quot;imagePath&quot;: &quot;https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ4ivg1J2leFzeuABXobVFNO/cover.webp&quot;,
        &quot;playlistId&quot;: &quot;PLRfhDHeBTBJ4ivg1J2leFzeuABXobVFNO&quot;
     }
  ]
  </code></pre>
  <p>Thanks in advance,</p>