Uneven spacing when using material ui grid

[Advitya-sharma]

In both the images the spacing on the right is more,I’m not using any custom css to alter the padding or margin

the Mui grid system seems to give me this result

spacing on the right

same on mobile screen

code for grid

const MovieCard = (props) => {

  const lengthSettler = (text) => {
    if (text.length > 301) {
      return `${text.substring(0, 300)}...Read More`;
    } else {
      return text;
    }
  };

  const print = () => {
    console.log('MovieCard', props);
  };
  print();
  return (
    <Grid container direction={'row'} justify="center" spacing={6}>
      {props.movies.map((movie) => (
        <Grid item xs={4}>
          <Card sx={{ maxWidth: 345, backgroundColor: '#ece3e3' }}>
            <CardActionArea>
              {movie.poster_path && (
                <CardMedia
                  component="img"
                  image={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
                  alt={movie.title}
                />
              )}

              {!movie.poster_path && (
                <CardMedia
                  component="img"
                  image="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png"
                  alt={movie.title}
                />
              )}
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {movie.title}
                </Typography>
                {movie.overview && (
                  <Typography variant="body2" color="text.secondary">
                    {lengthSettler(movie.overview)}
                  </Typography>
                )}
              </CardContent>
            </CardActionArea>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};

export default MovieCard;

things I tried

adding justify space-between

removing all the grid items

reinstalling mui

Live Link

Movie Buff

github Link
xAdvitya/movie-buff: Movie Buff helps you to stay updated about the latest movies (github.com)

[lasjorg]

According to the docs, the prop is justifyContent not justify, so maybe they are just not centered?

Properties - MUI System

Did you inspect the styles?

---

When asking for help providing a live example is usually the best way to get a timely response.

[Advitya-sharma]

tried justifyContent still no effect , I added the code and live link

[lasjorg]

Try adding an auto margin to the Card component you have set a max-width on to center them.

[Advitya-sharma]

but mui container should automatically add equal spacing , When I used container

[lasjorg]

Each grid item is a flex item with some percentage set. For a three-column layout, it would be 33.333%. If you then limit the width of what is inside that flex item it will no longer be that width and will not be centered inside its container.

You can add a Container component (which you likely should have anyway) around the grid and limit the total width on it (e.g. maxWidth="xl"). Then remove the custom styles on the cards.

React Container component - Material UI

[Advitya-sharma]

I used container here, I added maxWidth="xl" still same result

@Advitya-sharma

<Grid container

[lasjorg]

It is its own component that wraps the grid.

It still looks a bit broken at lower screen sizes and the spacing padding seems to be overflowing the container. You can sort of fix that by adding some left/right padding to the grid.

Code

      <Container maxWidth="xl" disableGutters>
        <Grid
          container
          direction={'row'}
          justifyContent="space-between"
          spacing={6}
          sx={{ paddingInline: '10px' }}
        >
          {props.movies.map((movie) => (
            <Grid item xs={12} sm={4}>
              <Card>
                <CardActionArea>
                  {movie.poster_path && (
                    <CardMedia
                      component="img"
                      image={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
                      alt={movie.title}
                    />
                  )}

                  {!movie.poster_path && (
                    <CardMedia
                      component="img"
                      image="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/1665px-No-Image-Placeholder.svg.png"
                      alt={movie.title}
                    />
                  )}
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                      {movie.title}
                    </Typography>

                    <Typography variant="body2" color="text.secondary">
                      {movie.overview}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          ))}
        </Grid>

        <Grid container direction={'row'} justifyContent="center" spacing={6}>
          <Grid item xs="auto">
            <Button
              variant="contained"
              edge="end"
              color="success"
              style={{ background: '#123C69' }}
              onClick={loadMoreHandler}
            >
              load more
            </Button>
          </Grid>
        </Grid>
      </Container>

---

I would suggest you update the deprecated dependencies and make sure you are using the latest non-beta version. I’m sure there might have been bug fixes as well. You can look at the migration docs.

[Advitya-sharma]

I reinstalled libraries , deleted node_modules and reinstalled
changed the code

this is how it looks currently

I also uploaded my code on sandbox though it doesnt seem to work here

determined-sea-iois5y - CodeSandbox

[lasjorg]

You didn’t remove the max-width from the Card component.