Tengo una serie de tarjetas, y se representan en 4 columnas:
[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] []Pero quiero hacerlo para que se muestren en 3 columnas. Tengo mi diseño así:
ListCardsList: (Aquí es donde recupero mis tarjetas del servidor)
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> ); }Lista de cartas:
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> </> ); }Tarjeta:
<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>¿Hay alguna manera de que pueda hacer esto? Ya sea con la función de mapa o usando flexbox
Así que supongo que quieres que se agrupen por columna en lugar de por fila. tengo 3 soluciones
1 caja flexible
Envuelva su lista de artículos dentro de un contenedor
.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 cuadrícula
Un poco más de código para escribir en este escenario
.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); } Otra forma de usar la cuadrícula es establecer este estilo de tarjeta Foreach (card2{ grid-row:2 }, card3{ grid-row:3 }, etc.) y eliminar las transforms + direction