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:

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:

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

What could be the reason for not receiving any response from my Firestore query?

Introducing a novel class designed to leverage the attributes of another class

Ensure that the Map reference object is accessible when the first modal window is displayed or opened

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

Tips for incorporating adjustable export dimensions for Highcharts within Next.js or React.js

Implementing a flat icon as a clickable link to navigate to a different route using React Router

Make sure to load dataLayer variables before setting up gtag in Google Tag Manager for seamless integration

What is the proper file format for a form action in CSS?

I'm wondering how I can design a utility function within my Redux module that can extract a specific subset of read-only data from the current state

Steps to Embed an Image File in a MERN Stack Application

What is the best way to neatly import multiple images in Next.js?

Ways to increase the size of a div to match the maximum height of its parent container

Encountering the error "props.children is throwing a function" while trying to publish my Gatsby website

I'm interested in developing a React function that generates recipe components based on a set of instructions provided in an array, along with a separate parameter specifying the recipe name

Acquire the content of a nested element using jQuery

There is an error in ReactJS: TypeError - _this.props.match is not defined

JavaScript encoding and decoding challenges

In Firefox, the scaling of svg masks is not functioning properly

Navigating through parent folder HTML files from child folder HTML files

Leveraging the power of the app folder in conjunction with the pages