Как мне оформить карточки так, чтобы у меня было по 3 карточки в ряду?

Question

Используя метод карты массива, я создаю компоненты карты, повторяя состояние в моем контейнере. Я хочу расположить карты в ряд вертикально, всего по 3 карты в каждом ряду.

Это функциональный компонент ContentCard:

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;

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

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;

Answer 1

Для этого вы можете использовать компоненты Colour и Row реактивной ленты:

Поскольку в начальной загрузке используется система с 12 столбцами, для отображения 3 столбцов в строке я установил sm на 4.

Я сделал эту песочницу, в полный размер страницы она отображает 3 карты подряд.

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

Поскольку у меня нет классов и логотипа, я их исключил.

Answer 2

Используйте row class в качестве контейнера, а затем присвойте col-4 class каждому дочернему элементу

<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>

Answer 3

Создайте свою обертку:

.wrapper{ 
    display:flex;
    flex-wrap:wrap;
} 

, а затем стилизуйте детей как

.child{
    flex-shrink:0;
    flex-basis of calc(100%/3);
}

песочница здесь: https://codesandbox.io/s/eager-mendel-s4dog