Soy nuevo en el mundo de la interfaz de usuario y estoy tratando de hacer una cuadrícula de tarjetas "receptiva", lo que significa que quiero colocar un número desconocido de tarjetas dentro de una cuadrícula y hacer que el texto y el diseño encajen bien. Estoy usando la tarjeta react-bootrap y CardGroup, esto es lo que obtuve hasta ahora.

Si uso demasiadas tarjetas, se estiran horizontalmente y no crean nuevas filas para un mejor diseño, esperaría tener un ancho mínimo, por lo que si no encaja, crea una nueva fila, pero estoy No estoy seguro de cómo hacer esto o si es la mejor práctica.

Lo siento si algunos de los términos son incorrectos; Acabo de empezar a aprender como se mencionó.

Aquí está mi código GridCard.js

 import React from "react"; import {Card, CardGroup, Button} from "react-bootstrap"; import "./CardGrid.css" const CardGrid = () => { return ( <CardGroup> {Array.from({ length: 10 }).map((_, index) => ( <Card className={"card-grid"} key={index}> <Card.Img className={"card-img"} variant="bottom" src={"https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg"}/> <Card.Body> <Card.Title><strong>Lorem ipsum dolor sit amet</strong></Card.Title> <Card.Text> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores harum, illum. Accusamus assumenda commodi consequuntur cumque, delectus deleniti dolorum eum illum nam nostrum provident quaerat quisquam quos reiciendis, reprehenderit voluptas!</p> </Card.Text> <Button variant="primary" href="www.google.com" rel={"noopener noreferrer"}> Learn More </Button> </Card.Body> </Card> ))} </CardGroup> ) } export default CardGrid

y mi CardGrid.css

 .card-group { justify-content: center; } .card-grid, .card { padding: 5px 5px !important; height: auto !important; justify-content: center; margin: 1rem; } .card-body { background-color: #F6F5F5; margin: 0; } .card-img, .card-img-top, .card-img-bottom { height: 10rem; width: auto; align-content: flex-start; } .card-text { height: fit-content; margin-bottom: 2rem; } .btn, .btn-primary { position: absolute; bottom: 5px; color: #263238; overflow: auto; }