css - Centrally align grids in material-ui react application

Question

I want to horizontally center Grid items inside a Grid container. Need some spacing between the Grid items as well. Please find the code below:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Container, Grid } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  topContainer: {
    marginTop: theme.spacing(5),
  },
}));

export const AddContact = () => {
  const classes = useStyles();
  return (
    <Container fixed>
      <Grid
        container
        spacing={3}
        alignContent="center"
        alignItems="center"
        className={classes.topContainer}
      >
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          <TextField id="name" label="Name" style={{ width: "100%" }} />
          <TextField
            id="userName"
            label="User Name"
            style={{ width: "100%" }}
          />
        </Grid>
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          STEP 2
        </Grid>
      </Grid>
    </Container>
  );
};

The layout looks like below as of now.

The Grid items are not centrally aligned and there is no spacing between them as well. Could anyone please help me resolve.

Thanks

Answer 1

Instead of giving alignContent="center" provide justify="space-around" to the <Grid> container element. It'll align the items evenly and also separate them from each other according to the available space.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Container, Grid } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  topContainer: {
    marginTop: theme.spacing(5),
  },
}));

const AddContact = () => {
  const classes = useStyles();
  return (
    <Container fixed>
      <Grid
        container
        spacing={3}
        // alignContent="center"
        justify="space-around"
        alignItems="center"
        className={classes.topContainer}
      >
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          <TextField id="name" label="Name" style={{ width: "100%" }} />
          <TextField
            id="userName"
            label="User Name"
            style={{ width: "100%" }}
          />
        </Grid>
        <Grid item xs={4} style={{ border: "1px solid #ccc" }}>
          STEP 2
        </Grid>
      </Grid>
    </Container>
  );
};

export default AddContact

Here is the working sandbox link:- https://codesandbox.io/s/material-demo-forked-0sf86

You can try this also to play with grid alignment in @material-ui:- https://material-ui.com/components/grid/#interactive