Codifico exactamente como en un video actual de YouTube, en el video las tarjetas se muestran en una fila, en mi caso son extrañamente como una columna.

¿Por qué? El valor predeterminado debería estar en línea. Incluso si ingreso explícitamente dirección = "fila" en el contenedor de cuadrícula, todavía no ayuda.

Aplicación.js

 import "./App.css"; import TourCard from "./components/TourCards"; import Container from "@mui/material/Container"; import { Grid } from "@mui/material"; function App() { return ( <div className="App"> <Container> <Grid Container spacing={4} direction="row"> <TourCard /> <TourCard /> <TourCard /> <TourCard /> </Grid> </Container> </div> ); } export default App;

TourCards.js

 import Paper from "@mui/material/Paper"; import { Grid, Typography } from "@mui/material"; import Logo from "../logo.svg"; const TourCard = () => { return ( <Grid item xs={3}> <Paper elevation={3}> <img src={Logo} alt="logo" clasName="img" /> <Typography>Nr.1</Typography> </Paper> </Grid> ); }; export default TourCard;