How to align items at the center in material-ui styling

Question

How to align items at the center in material-ui styling

I have a row of cards inside a container that I want to align in the center with equal spacing around them. I am using the material-ui UI library for the layout. Despite adding the justifyContent: center property, the cards are not evenly spaced.

This is how the current UI appears:

https://i.sstatic.net/fo2iz.png

There seems to be extra space on the right side of the last card. The spacing scale reveals this:

Here's the code snippet so far:

const Home = ({ cards }) => {
  return (
    <Container maxWidth="xl">
      <Grid
        container
        justifyContent="center"
        spacing={3}
        my={8}
      >
        {cards.map((card) => {
          return (
            <Grid item xs={12} sm={6} md={3}>
              <Card sx={{ maxWidth: 300 }}>
                <CardActionArea>
                  <CardMedia
                    component="img"
                    height="140"
                    image="../../bg2.png"
                    alt="green iguana"
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                      {card.title}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      {card.description}
                    </Typography>
                  </CardContent>
                </CardActionArea>
                <CardActions>
                  <Button size="small" color="primary">
                    View More
                  </Button>
                </CardActions>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </Container>
  );
};

If I remove the container wrapper

<Container maxWidth="xl">

, then the UI looks like this:

https://i.sstatic.net/xmnnG.png

I'm not very experienced with MUI, so any help in fixing this issue and achieving the desired layout would be greatly appreciated.

css reactjs material-ui

Answer 1

Answer №1

Click here to see a demonstration of how to evenly space your cards using

justifyContent = "space-evenly"

and alignItems = "center".

https://example.com/theme-dark

https://example.com/image.png

import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";

export default function MediaCard() {
  const cards = [1, 2, 3];
  return (
    <Grid
      container
      direction="row"
      justifyContent="space-evenly"
      alignItems="center"
    >
      {cards.map(() => (
        <Card sx={{ maxWidth: 345 }}>
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              Lizard
            </Typography>
            <Typography variant="body2" color="text.secondary">
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging across all continents except Antarctica
            </Typography>
          </CardContent>
          <CardActions>
            <Button size="small">Share</Button>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
      ))}
    </Grid>
  );
}

Answer 2

Click here to see a demonstration of how to evenly space your cards using

justifyContent = "space-evenly"

and alignItems = "center".

https://example.com/theme-dark

https://example.com/image.png

import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";

export default function MediaCard() {
  const cards = [1, 2, 3];
  return (
    <Grid
      container
      direction="row"
      justifyContent="space-evenly"
      alignItems="center"
    >
      {cards.map(() => (
        <Card sx={{ maxWidth: 345 }}>
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              Lizard
            </Typography>
            <Typography variant="body2" color="text.secondary">
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging across all continents except Antarctica
            </Typography>
          </CardContent>
          <CardActions>
            <Button size="small">Share</Button>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
      ))}
    </Grid>
  );
}

Answer 3

Answer №2

If you're looking to achieve this, a little hacky approach can do the trick.

Similar questions have been asked before, and you can find some alternative solutions here and here.

Building on the insights from those discussions, I've put together a sample code here, utilizing a 'hacky' technique with a custom hook that provides window dimensions.

Now, let's dive into the code:


const cards = [1, 2, 3, 4, 5];

// Constants related to card maxWidth
const maxWidth = 300;

// Calculating total Cards Width based on screen size
const totalwidth = maxWidth * cards.length;

// Getting actual screen width
const { width } = useWindowDimensions();

// Checking if screen width is smaller than total cards width
const screenSmallerThanAllCardsWidth = width < totalwidth + 20;// added +20 for safety

The hacky - adding extra (n - 1) filler divs

let divsHacky= [];

  if (screenSmallerThanAllCardsWidth)
    for (var i = 0; i < cards.length - 1; i++) {
      divsHacky.push(
        <Box
          key={i}
          sx={{
            width: maxWidth,
            height: 0
          }}
        />
      );
    }

Rendering the component:

<Grid container direction="row" justifyContent="space-around">
      {cards.map((item, index) => (
        <Grid item my={1} key={index}>
          <Card sx={{ maxWidth }}>
            <CardContent>
              <Typography gutterBottom variant="h5" component="div">Lizard</Typography>
              <Typography variant="body2" color="text.secondary">
                Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
              </Typography>
            </CardContent>
            <CardActions>
              <Button size="small">Share</Button>
              <Button size="small">Learn More</Button>
            </CardActions>
          </Card>
        </Grid>
      ))}
     // Render the divsHacky if they exist
      {divsHacky}
    </Grid>

The windowDimensions custom hook:

import { useState, useEffect } from "react";

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}

Answer 4

If you're looking to achieve this, a little hacky approach can do the trick.

Similar questions have been asked before, and you can find some alternative solutions here and here.

Building on the insights from those discussions, I've put together a sample code here, utilizing a 'hacky' technique with a custom hook that provides window dimensions.

Now, let's dive into the code:


const cards = [1, 2, 3, 4, 5];

// Constants related to card maxWidth
const maxWidth = 300;

// Calculating total Cards Width based on screen size
const totalwidth = maxWidth * cards.length;

// Getting actual screen width
const { width } = useWindowDimensions();

// Checking if screen width is smaller than total cards width
const screenSmallerThanAllCardsWidth = width < totalwidth + 20;// added +20 for safety

The hacky - adding extra (n - 1) filler divs

let divsHacky= [];

  if (screenSmallerThanAllCardsWidth)
    for (var i = 0; i < cards.length - 1; i++) {
      divsHacky.push(
        <Box
          key={i}
          sx={{
            width: maxWidth,
            height: 0
          }}
        />
      );
    }

Rendering the component:

<Grid container direction="row" justifyContent="space-around">
      {cards.map((item, index) => (
        <Grid item my={1} key={index}>
          <Card sx={{ maxWidth }}>
            <CardContent>
              <Typography gutterBottom variant="h5" component="div">Lizard</Typography>
              <Typography variant="body2" color="text.secondary">
                Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
              </Typography>
            </CardContent>
            <CardActions>
              <Button size="small">Share</Button>
              <Button size="small">Learn More</Button>
            </CardActions>
          </Card>
        </Grid>
      ))}
     // Render the divsHacky if they exist
      {divsHacky}
    </Grid>

The windowDimensions custom hook:

import { useState, useEffect } from "react";

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}

Answer 5

Answer №3

Make the following adjustments:

Take out the spacing and justifyContent properties from the Grid container.
If you want spacing, add padding to the Grid items.
The Grid items should use a display of flex with the
```
justifyContent="center"
```
property.

Check out a sample on Codesandbox. Borders have been added for better visualization.

Answer 6

Make the following adjustments:

Take out the spacing and justifyContent properties from the Grid container.
If you want spacing, add padding to the Grid items.
The Grid items should use a display of flex with the
```
justifyContent="center"
```
property.

Check out a sample on Codesandbox. Borders have been added for better visualization.

Answer 7

Answer №4

It seems like a good idea to wrap each Card in Grid with justifyContent="center" and alignItems="center"

<Grid container direction="row">
  {cards.map(() => (
    <Grid xs={4} item justifyContent="center" alignItems="center">
      <Card sx={{ maxWidth: 345 }}>
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a diverse group of reptiles, with over 6,000 species found across all continents except Antarctica
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small">Share</Button>
          <Button size="small">Learn More</Button>
        </CardActions>
      </Card>
    </Grid>
  ))}
</Grid>

Answer 8

It seems like a good idea to wrap each Card in Grid with justifyContent="center" and alignItems="center"

<Grid container direction="row">
  {cards.map(() => (
    <Grid xs={4} item justifyContent="center" alignItems="center">
      <Card sx={{ maxWidth: 345 }}>
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a diverse group of reptiles, with over 6,000 species found across all continents except Antarctica
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small">Share</Button>
          <Button size="small">Learn More</Button>
        </CardActions>
      </Card>
    </Grid>
  ))}
</Grid>

How to align items at the center in material-ui styling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to track the amount a user scrolls once they have reached the bottom of a page using Javascript?

Error: Element type is invalid: a string was anticipated, but not found

Error in React: The <Route> component should only be used within a <Routes> element and not rendered directly. Make sure to enclose your <Route> within a <Routes> component

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

The Chakra UI Modal overlay consistently envelops the entire screen

Shopping with CommerceJS just got easier with the convenience of using PayPal

How can the presence of a CSS rule prevent another from being applied?

Vercel React App encounters compilation issue with error code 127 in "react-scripts build" operation

Looking for a method to incorporate an onclick function into a column for renderCell within the MUI Datagrid. Any suggestions?

Ways to eliminate double slashes from URL in Next Js. Techniques for intercepting and editing a request on the server side using getServerSideProps

MUI Modal overlay for stylish Ionic select dialogues

Adapting CSS styles according to the height of the viewport

Using the pages folder in NextJS may lead to static exports being blocked due to the utilization of useContext

Adding a three-dimensional perspective to an HTML5 canvas without utilizing CSS3 or WebGL

The hintText property in Material UI's Chip-input component seems to be malfunctioning

There seems to be an issue with React-hook-form and material-ui not retaining value changes in the onBlur() method

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

Creating a promise instance with the axios create method

Utilizing the sx prop for MUI v5 Theme.spacing with a pre-defined object

Customize the MUI Theme to exclusively manage the style of <TextField color="primary"/> component