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