How to make a list in MaterialUI go to a new line? - css

Question

import React from 'react';
import {
List, ListItem,
} from '#material-ui/core';
import {
makeStyles, createStyles,
} from '#material-ui/core/styles';
import clsx from 'clsx';
import VideoCard from './VideoCard';
const useStyles = makeStyles(() => createStyles({
root: {
display: 'inline-flex',
},
item: {
padding: '80px 40px',
},
}));
export default function VideoList(props: any) {
const { videos } = props;
const classes = useStyles();
return (
<div>
<List className={clsx(classes.root)}>
{videos.map((video: any) => (
<ListItem className={classes.item} button key={video}>
<VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} />
</ListItem>
))}
</List>
</div>
);
}
import React from 'react';
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
import Thumbnail from './Thumbnail';
export default function VideoCard(props: any) {
const { thumbnailImage, videoTitle } = props;
return (
<div>
<Thumbnail imageSrc={thumbnailImage} />
<Typography>{videoTitle}</Typography>
</div>
);
}
I am trying to display a series of video titles and thumbnails (like how video cards are displayed on the frontpage of youtube). How do I get the cards to go to a new line say every 4 cards? Currently, they line up and go off screen.
Edit: added my VideoCard code aswell

Answer 1

Make it float: 'left' and then set 100% - 25% to make a new line every 4 cards
const useStyles = makeStyles(() =>
createStyles({
root: {
width: "100%",
display: "inline-block"
},
item: {
padding: "80px 40px",
float: 'left',
width: '25%'
}
})
);