Centrally align grids in material-ui react application - css

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

Answer 2

Try something like this.
<Grid
container
spacing={2}
>
<Grid item md={4} lg={4}> </Grid>
<Grid item xs={12} sm={12} md={4} lg={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={12} sm={12} md={4} lg={4} style={{ border: "1px solid #ccc" }}>
STEP 2
</Grid>
</Grid>