How should I style the cards so that I can have 3 cards per row?

Viewed 1027

Using the map method of array I am creating card components iterating the state in my container. I want to arrange the cards in rows vertically with only 3 cards in each row.

This is the ContentCard functional component :

import React from "react";
import CardLogo from "./../../../Assets/CardLogo.PNG";
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button } from "reactstrap";
import classes from "./ContentCard.module.css";

const contentCard = props => (
  <Card className={classes.ContentCard}>
    <CardImg src={CardLogo} />
    <CardBody>
      <CardTitle>
        <b>{props.title}</b>
      </CardTitle>
      <CardSubtitle>from ₹{props.price}</CardSubtitle>
      <CardText>
        Typically 450-400 words, an e-book is perfect for your target audience ranging from
        prospective customers to users
      </CardText>
      <Button>Order</Button>
    </CardBody>
  </Card>
);
export default contentCard;

This is the ContentCards Parent Component which reuses the ContentCard Component. How should I style the cards which I get after iterating the state in this component to arrange them as I said above.

import React, { Component } from "react";
import classes from "./ContentCards.module.css";
import ContentCard from "./ContentCard/ContentCard";

class ContentCards extends Component {
  state = {
    content: [
      { title: "Blog / Article", price: "500" },
      { title: "Newsletter / Emailer", price: "1000" },
      { title: "Whitepaper", price: "2000" },
      { title: "e-book", price: "1000" },
      { title: "Report-Guide", price: "1000" },
      { title: "Product Description", price: "500" },
      { title: "Website Content", price: "1000" },
      { title: "Video Script", price: "1000" },
      { title: "Company Profile / Brochure", price: "2000" },
      { title: "Press Realise", price: "2000" }
    ]
  };

  render() {
    let card = this.state.content.map(cnt => (
      <ContentCard key={cnt.title} title={cnt.title} price={cnt.price} />
    ));

    return <div className={classes.ContentCards}>{card}</div>;
  }
}

export default ContentCards;
2 Answers

You can use Col and Row components of reactstrap for this:

Since bootstrap uses 12 column system, to display 3 columns in row, I set sm to 4.

I made this sandbox, in full page size it displays 3 card in a row.

https://codesandbox.io/s/bold-heisenberg-o9s2k

Since I don't have classes and logo I excluded them.

Use row class as container and then assign col-4 class to each child

<div className={`${classes.ContentCards} row`}>
    {
    this.state.content.map(cnt => (
            <ContentCard
                className="col-sm-4"
                key={cnt.title}
                title={cnt.title}
                price={cnt.price}
            />
        ));
    }
</div>

Related