CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
SerGO
SerGO

Reputation: 13

Grid in Container is not displayed in a row but as a column

I code exactly like in a current YouTube video, in the video the cards are shown in a row, in my case they are strangely as a column.

Why? Default should actually be in line. Even if I explicitly enter direction="row" in the grid container, it still doesn't help.

App.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;

Upvotes: 1

Views: 50

Answers (1)

Steve G
Steve G

Reputation: 13357

Check the capital C in <Grid Container spacing={4} direction="row"> -- it should be a lower case c for example:

<Grid container spacing={4}>
  <TourCard />
  <TourCard />
  <TourCard />
  <TourCard />
</Grid>

It is the container prop that causes display: flex to be applied to the Grid container. Using improper case on a prop is the same as omitting it, as the props are case-sensitive.

enter image description here

Simplified reproduction of the error and correction: https://codesandbox.io/s/basicgrid-material-demo-forked-un6nk?file=/demo.js

Upvotes: 1

Related Questions