tengo un problema a la hora de mostrar las cartas en el contenedor padre, muestran todas en una fila y se desbordan, lo que quiero obtener son dos filas de 3 cartas cada una, pero no se porque al mostrarlas, se muestran solo en una fila.
Aquí esta el contenedor padre, donde se muestran todas las cartas
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import Card from './Card'; const Home = () => { return (
<div className="container">
<div className="tituloGestion">
<p className="h2 text-center">Panel de gestión </p>
</div>
<div className="listaCartasGestion row">
<div className="listaCartas">
<Card/>
</div>
</div>
</div>
) } export default Home;
Aquí esta el contenedor hijo, donde creo las 6 cartas,recorriendo un archivo json que tiene los datos de cada carta
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useEffect, useState } from "react";
import axios from 'axios';
const Card = () => {
const [carta, setCarta] = useState([])
useEffect(() => {
fetch('../cartas.json')
.then(response => {
return response.json();
})
.then(data => {
//console.log(data.cita)
setCarta(data.cita);
})
.catch((err) => {
console.log(err.message)
});
}, []);
const renderCard = (card, index) => {
if (carta.length) {
return (
// Array.from(carta).forEach((card) => {
// return (
// console.log(card)
<div style={{width:"14rem"}} className="card col-md-4" key={index} >
<img
src={card.imagen}
alt={card.nombre}
className="card-img py-3 px-3"
/>
<div className="card-body">
<p className="card-title">{card.descripcion}</p>
</div>
<div className="card-footer text-center fs-3">
<Link to={card.nombre} className="text-dark">{card.nombre}</Link>
</div>
</div>
)
}
// )
// }
}
return <div className='app grid col-md-12'>{carta.map(renderCard)}</div>
}
export default Card;
Aquí podéis ver como quedan las cartas
.listaCartasGestion
,.row
y.listaCartas
? Y te consulto, vos queres mostrar las tres primeras cartas en una fila, y las otras tres en otra. Cada card (o las tres en conjunto) tiene un ancho minimo o maximo?