Блог

Я использовал материальную карту пользовательского интерфейса и когда я ее показываю. Это выглядит как изображение ниже. Я хочу показать свою карточку таким образом, когда карточки не помещаются на страницу, которая находится ниже, и все карточки должны быть одинакового размера. Как я могу это сделать?

Вот мой код:

 const useStyles = makeStyles({ // Styling for my cards
  root: {
    width: 255,// i changed that line and below line but nothing happened
  },
  media: {
    height: 190,
  },
});

export default function AlbumsCard() {
  const classes = useStyles();
 ..... //Some http requests
  return (
    <div>
      <div>
        <input
          style={{
            width: 500,
            "margin-left": "auto",
            "margin-right": "auto",
            "margin-top": "10px",
          }}
          type="text"
          placeholder="Search Album"
          onChange={handleChange}
          value={input}
        />
      </div>
      <div style={{ display: "flex" }}> //cardss
        {k.map((album) => (
          <Link
            to={`/albums/${album.album_id}`}
            style={{ textDecoration: "none", color: "#15cdfc" }}
          >
            <Card style={{ margin: "10px" }} className={classes.root}>
              <CardActionArea>
                <CardMedia
                  className={classes.media}
                  image={album.album_pfp}
                  title={album.album_name}
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {album.album_name}
                  </Typography>
                  <Typography
                    variant="body2"
                    color="textSecondary"
                    component="p"
                  >
                    {album.album_song_count}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}
 

Также изображение из моего приложения:

Вы можете видеть это выше. Все карты, расположенные в линию, и высота некоторых карт различны. Также есть полоса прокрутки.

Я хочу отобразить всю карточку i одинакового размера и когда она переполняет страницу. Он идет ниже.

Обновленная версия:

Теперь каждая карта имеет разный размер, как я могу это решить? Я думаю, это зависит от размера изображения.