Я изучаю Material UI, я написал сетку, и она очень хорошо работает в настольном браузере. Я не возражаю против этого. Но прохожу проблему, чтобы сделать его удобным для мобильной версии.
это моя сетка:
<Grid container spacing={1} className={classes.grid}>
<Grid className={classes.griditem} item xs={12} sm={6} md={4} lg={4}>
<Paper className={classes.paper}>
<Typography className={classes.title} variant='h6'>
Podcat title in two lines
</Typography>
<Typography className={classes.time} color="textSecondary">
5:21
</Typography>
</Paper>
</Grid>
<Grid className={classes.griditem} item xs={12} sm={6} md={4} lg={4}>
<Paper className={classes.paper}>
<Typography className={classes.title} variant='h6'>
Podcast title in two lines
</Typography>
<Typography className={classes.play} color="textSecondary">
13 plays
</Typography>
<Link href="#" className={classes.link}>
Link
</Link>
</Paper>
</Grid>
<Grid className={classes.griditem} item xs={12} sm={6} md={4} lg={4}>
<Paper className={classes.paper}>
<Typography className={classes.title} variant='h6'>
Podaca
</Typography>
<Typography className={classes.play} color="textSecondary">
13 plays
</Typography>
<Link href="#" className={classes.link}>
Link
</Link>
</Paper>
</Grid>
</Grid>
На данный момент это выглядит на рабочем столе это:
В мобильной версии вид сверху должен быть беззаботным, он должен быть примерно таким, как показано ниже, но не совсем таким, я просто хочу, это должно быть беззаботно в мобильной версии. Может ли кто-нибудь помочь сделать корешок в мобильной версии этой сетки?