fluid manga grid

webUI/react/src/components/MangaCard.tsx

@@ -5,6 +5,7 @@ import CardActionArea from '@material-ui/core/CardActionArea';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import { Link } from 'react-router-dom';
+import { Grid } from '@material-ui/core';
 
 const useStyles = makeStyles({
     root: {
@@ -38,8 +39,6 @@ const useStyles = makeStyles({
 
 interface IProps {
     manga: IManga
-    // eslint-disable-next-line react/no-unused-prop-types, react/require-default-props
-    // ref?: false | React.MutableRefObject<HTMLInputElement | undefined>
 }
 const MangaCard = React.forwardRef((props: IProps, ref) => {
     const {
@@ -50,6 +49,7 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
     const classes = useStyles();
 
     return (
+        <Grid item xs={6} sm={4} md={3} lg={2}>
             <Link to={`/manga/${id}/`}>
                 <Card className={classes.root} ref={ref}>
                     <CardActionArea>
@@ -67,6 +67,7 @@ const MangaCard = React.forwardRef((props: IProps, ref) => {
                     </CardActionArea>
                 </Card>
             </Link>
+        </Grid>
     );
 });
 

webUI/react/src/components/MangaGrid.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import Grid from '@material-ui/core/Grid';
 import MangaCard from './MangaCard';
 
 interface IProps{
@@ -43,9 +44,9 @@ export default function MangaGrid(props: IProps) {
     }
 
     return (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
+        <Grid container spacing={1}>
             {mapped}
-        </div>
+        </Grid>
     );
 }