使用 flexbox / map 函数制作一个 3 列网格

Question

我有一组卡片，它们在 4 列中呈现自己：

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

但我想让它们呈现在 3 列中。我的布局是这样的：

ListCardsList：（这是我从服务器恢复卡片的地方）

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>
    );
}

卡片列表：

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>
        </>
    );
}

卡片：

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

有什么办法可以做到这一点吗？使用 map 函数或使用 flexbox

Answer 1

所以我猜你希望它们按列而不是按行分组。我有 3 个解决方案

1 个 Flexbox

将您的项目列表包装在一个容器中

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

在此场景中需要编写更多代码

.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);
    }

使用网格的其他方法是设置此样式 Foreach card (card2{ grid-row:2 }, card3{ grid-row:3 },等）并删除 transforms + direction

使用 flexbox / map 函数制作一个 3 列网格

Make a 3 column grid with flexbox / map function

javascript

arrays

reactjs

react-bootstrap