How to get same width in material-ui card component?

user_11386799 0
Viewed 3426

How to get these cards the same width?

enter image description here

When I'm using flexbox in material-ui for these cards width is not get the same size. How can I fix this? Should I use Grid for it? here are the card component and screen. flexbox I applied for the screen.

card component

import React from 'react'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { useStyles } from './classes'

const Post = ({card }) => {
  const classes = useStyles()

  return (
    <div>
    <Card className={classes.root}>    
      <CardActionArea>
        <CardMedia className={classes.media}  image={card.selectedFile}/>
        <CardContent>
          <Typography gutterBottom variant='h5' component='h2'>
            {card.title}
          </Typography>
          <Typography variant='body2' color='textSecondary' component='p'>
            {card.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>       
        <Button size='small' color='primary'>
          {card.category}
        </Button>
      </CardActions>
    </Card>
  </div>
  )
}

export default Post

card styles

import { makeStyles } from '@material-ui/core/styles'

export const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
    margin: "3rem",    
    
  },
  media: {
    height: 140,
  },
}))

screen

import React from 'react'
import Post from '../components/card/Post'
import gallery from '../gallery'
import Box from '@material-ui/core/Box';

const Posts = () => {
  return (
    <Box display="flex" flexWrap="wrap" justifyContent="center" m={1} p={1}>
      {gallery.map((card ,index) => (
        <Post key={index} card={card} />
      ))}
    </Box>
  )
}

export default Posts
flexbox material-ui reactjs css
2 Answers

Not sure if it is possible because my react knowledge isn't that great, but maybe U can try setting a minWidth on the cards?

Or since u applied flex on the container, try applying

    flex-grow: 1;
    flex-basis: 0;

On the cards.

The flex-basis should set the base size of the cards to 0, normally this isnt the case.

The flex-grow will equally distribute the remaining size to the cards, but since normally the cards have a base sizes that is not 0 the distribution will look uneven.

Normally using those 2 css tags would fix problems like these. But like I said in the beginning, my knowledge of react isnt that great so I do not really know if this will work in react as well.

I hope this helps or at least pushes u in the right direction.

user_57371810

What about add minWidth to root in card styles?

import { makeStyles } from '@material-ui/core/styles'

export const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
    minWidth: 100,
    margin: "3rem",    
    
  },
  media: {
    height: 140,
  },
}))
user_117203210
Related