CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Supreeth
Supreeth

Reputation: 37

How to align 2 cards side by side using Material UI in React, programmatically (after getting data from API])?

I am getting data from an API and I have to display the received data in the form of cards, with two cards placed side by side. Currently, I am just mimicking it by using an array and passing them to the component programmatically and have attached the output image and my code below.

I want to get two cards side by side. But getting them one below the other.

Code sandbox link is available here

Output I am getting is: Cards one below the other

How can I get the output in such a way that there are two cards in a single row?

Upvotes: 0

Views: 2048

Answers (1)

Fatih Aktaş
Fatih Aktaş

Reputation: 1564

One way is, you can add the container attribute to the <Grid > component. And decrease the 12xs width breakpoint of the Grid that you made inside of it to something like 5xs.

return (
    <div className="home">
      <Container className="root-container">
        <Grid className="sample-grid" container spacing={3}>
          {data.map((elem) => (
            <Grid className="feedback-requesters-grid" container item xs={5}>
              <FormRow
                title={elem.title}
                subtitle={elem.subtitle}
                date={elem.date}
              />
            </Grid>
          ))}
        </Grid>
      </Container>
    </div>
  );

Upvotes: 1

Related Questions