Make a 3 column grid with flexbox / map function-CodePudding

I have an array of cards, an they are rendering themselves in 4 columns:

[] [] [] []
[] [] [] []
[] [] [] []
[] [] [] []

But I want to make it so that they render in 3 columns. I have my layout like so:

ListCardsList: (This is where I recover my cards from the server)

export default function ListCardsList({ listID }) {
    const { isLoading, isError, error, data } = useCardsForList(listID);

    return (
        <Col xs={12}>
            <br />
            <LoadingAndErrorCentered isLoading={isLoading} isError={isError} error={error} />
            {data && <CardsList cards={data} isOnList={true} listID={listID} />}
        </Col>
    );
}

CardsList:

export default function CardsList({ cards, isOnList, listID }) {
    const { isLoading, isError, error, data } = useInventoryItemsForCards(cards.map((card) => card !== null && card._id));
    let counter = 0;

    return (
        <>
            ...
            <Row className='justify-content-md-center'>
                {data &&
                    cards.map((card, index) => {
                        return (
                            card != null && (
                                <Card key={card._id} card={card} inventoryItem={data[index]} isOnList={isOnList} listID={listID} />
                            )
                        );
                    })}
            </Row>
        </>
    );
}

Card:

<Col xs={15} md={3} lg={3} className={'mb-3'}>
            <div className={'d-flex flex-column align-items-center'}>
                <h5 align={'center'} className={'fw-bolder'}>
                    {card.name}
                </h5>
                ....
            </div>
</Col>

Is there any way I can do this? Either with the map function or using flexbox

CodePudding user response：

So I guess you want them to be grouped by column instead of row. I have 3 solutions

1 Flexbox

Wrap your list of items inside a container

.container{
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   gap:10px//optional
}

.item{
   flex-basis:30%; // will try to fill 30% of the parents width 
}

2 Grid

A bit more code to write in this scenario

.container{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        place-items:center;
        gap:10px//optional
        direction:rtl;
        transform:rotateZ(-90deg);
    }

    .item{
        display:table-cell;
        transform:rotateZ(90deg);
    }

Other way to use grid is to set this style Foreach card (card2{ grid-row:2 }, card3{ grid-row:3 },etc.) and removing the transforms direction