Card в Material UI, как с этим работать)?

Question

[estoniec]

Нужно объединить данные 2 карточки в одну группу (т.е. чтобы они были 1 строкой) скрин. Код:

const cards = [1],

const carde = [1],

            <Container className={classes.cardGrid} maxWidth="md">
         <Grid container spacing={4}>
           {cards.map((card) => (
          <Grid item key={card} xs={12} sm={6} md={4}>
            <Card className={classes.card} style={style}>
              <CardMedia
                className={classes.cardMedia}
                image="https://source.unsplash.com/random"
                title="Imgae title"
              />
              <CardContent className={classes.cardContent}>
                <Typography variant="h5" gutterBottom>Почему мы?</Typography>
                <Typography> Потому что я так сказал</Typography>
              </CardContent>
              <CardActions>
                <Button size="small" color="primary">
                  Убедиться
                  </Button>
              </CardActions>
              </Card>
              </Grid>
           ))}
         </Grid>
         <Grid container spacing={4}>
           {carde.map((card) => (
          <Grid item key={card} xs={12} sm={6} md={4}>
            <Card className={classes.card} style={style}>
              <CardMedia
                className={classes.cardMedia}
                image="https://source.unsplash.com/random"
                title="Imgae title"
              />
              <CardContent className={classes.cardContent}>
                <Typography variant="h5" gutterBottom>Почему ты?</Typography>
                <Typography> Потому что</Typography>
              </CardContent>
              <CardActions>
                <Button size="small" color="primary">
                  Убедиться
                  </Button>
              </CardActions>
              </Card>
              </Grid>
           ))}
         </Grid>
        </Container>

Answer 1

[Чипекве]

Этот код предполагает, что это не две карточки, а две группы карточек.

Если же карточек только две, то нужно убрать создание групп через map() и поместить обе карточки в один <Grid> элемент.

Comments

[estoniec]

<Container className={classes.cardGrid} maxWidth="md">
         <Grid container spacing={4}>
           {cards.map((card) => (
          <Grid item key={card} xs={12} sm={6} md={4}>
                       <Card className={classes.card} style={style}>
              <CardMedia
                className={classes.cardMedia}
                image="https://source.unsplash.com/random"
                title="Imgae title"
              />
              <CardContent className={classes.cardContent}>
                <Typography variant="h5" gutterBottom>Почему ты?</Typography>
                <Typography> Потому что</Typography>
              </CardContent>
              <CardActions>
                <Button size="small" color="primary">
                  Убедиться
                  </Button>
              </CardActions>
              </Card>
            <Card className={classes.card} style={style}>
              <CardMedia
                className={classes.cardMedia}
                image="https://source.unsplash.com/random"
                title="Imgae title"
              />
              <CardContent className={classes.cardContent}>
                <Typography variant="h5" gutterBottom>Почему мы?</Typography>
                <Typography> Потому что я так сказал</Typography>
              </CardContent>
              <CardActions>
                <Button size="small" color="primary">
                  Убедиться
                  </Button>
              </CardActions>
              </Card>
              </Grid>
           ))}
         </Grid>
        </Container>

Если я правильно понял, тоо надо было сделать так. Но нет, оно не сработало. А вот расстояние между карточками пропало https://imgur.com/a/9RChTGE

[Чипекве]

<Container className={classes.cardGrid} maxWidth="md">
      <Grid container spacing={2}>

        <Grid item xs={6}>
          <Card className={classes.card}>...
          </Card>
        </Grid>

        <Grid item xs={6}>
          <Card className={classes.card}>...  
          </Card>
        </Grid>

      </Grid>
    </Container>

[estoniec]

Чипекве, спасибыч ^^