Reactjs Align Material-Ui Elements Horizontally

React Material UI Grid Horizontally Align Items for Containers With Different Number of Items

We want to add props to the <Grid> to make this possible.

1. alignItems="flex-start" will allow grid items to stick to the top then fall towards the bottom.
2. direction="column" will change the flow of how items are "stacked" in a sense. This will change the sizing of the container and items that it is attached to so expect some xs={12} to turn into xs={6} and vice versa.

Here's the example code below as well as its implementation via sandbox.

import "./styles.css";
import { Grid } from "@material-ui/core";

export default function App() {
  return (
    <div className="App">
      <Grid alignItems="flex-start" container spacing={1}>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x2
          </Grid>
        </Grid>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y2
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y3
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

How to horizontally center an item in MUI Grid item?

Two seconds later... I solved this through some simple CSS:

<Grid item xs={4} style={{textAlign: "center"}}>
</Grid>

If there is another approach that is somehow more "correct", please feel free to post another answer.

ReactJS align material-ui elements horizontally

Just for the record, I managed to align radio buttons using flexboxgrid... Did something like this:

      <div className="row">
        <div className="col-md-2">
          Type:
        </div>
        <div className="col-md-10">
          <RadioButtonGroup
             className="row"
             name="type">
            <RadioButton
               className="col-md-4"
               value="other"
               label="Other" />
            <RadioButton
               className="col-md-4"
               value="custom"
               label="Custom" />
          </RadioButtonGroup>
        </div>
      </div>

Align Title Horizontally Using Material-Ui and CSS

I have edited your Code:

Inserted the new h1 tag, styled it, and changed the Grid direction from column to row.

import React from "react";
import { makeStyles } from "@material-ui/styles";
import { Box } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import QRCode from "react-qr-code";
import { red } from "@material-ui/core/colors";

const useStyles = makeStyles(() => ({
  button: {
    color: "white"
  },
  hideButton: {
    visibility: "hidden"
  },
  imageSection: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    height: "100%"
  },
  img: {
    height: "4cm",
    width: "4cm",
  },
  h1: { // new
    fontSize: "0.70rem",
    width: "100%",
    textAlign: "center",
    margin: "0.1rem"
  },
  precinctNo: {
    display: "flex",
    justifyContent: "center",
    margin: "0",
    fontSize: "0.70rem",
    fontWeight: "bold",
    textTransform: "uppercase",
    color: "#000"
  },
  controlNo: {
    display: "flex",
    justifyContent: "flex-start",
    margin: "0",
    fontSize: "0.70rem",
    fontWeight: "bold",
    textTransform: "uppercase",
    color: "#000"
  },
  boxBorder: {
    border: "3px solid black"
  },
  container: {
    width: "8.5cm",
    height: "5.5cm",
    borderRadius: "3px",
    border: "3px solid #000000",
    color: "#00000"
  },
  pictureSection: {
    display: "flex",
    flexBasis: "100%"
  },
  nameAddressSection: {
    display: "flex",
    flexDirection: "column",
    textAlign: "center",
    flexBasis: "100%",
    justifyContent: "space-between"
  },
  alignItems: {
    alignSelf: "center",
    textAlign: "center"
  },
  fontText: {
    color: "#000000",
    fontSize: "0.70rem",
    fontWeight: "bold",
    textTransform: "uppercase"
  }
}));

const SampleCard = () => {
  const classes = useStyles();

  return (
    <Box m={3}>
      <Grid
        container
        direction="row" // new
        className={classes.container}
        spacing={2}
      >
        <h1 className={classes.h1}>Hello John Joseph Jones</h1> // new
        <Grid item xs={6} className={classes.pictureSection}>
          <div className={classes.imageSection}>
            <img
              src="https://picsum.photos/id/237/200/300"
              className={classes.img}
              alt="no pic"
            />{" "}
            <p className={classes.precinctNo}>PR  4838390</p>
            <p className={classes.controlNo}>555555</p>
          </div>
        </Grid>

        <Grid item xs={6} className={classes.nameAddressSection}>
          <Box className={classes.fontText}>John Joseph Jones</Box>

          <Box mt={1} className={classes.fontText}>
            26 South Hawthorne Drive Tonawanda, NY 14150
          </Box>

          <Box mt={1}>
            <QRCode size={80} value={"4234432"} />
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default SampleCard;

Watch out for the comments in your return statement. (I don't know if they will break your application)

React Material UI Grid Horizontally Align Items for Containers With Different Number of Items

We want to add props to the <Grid> to make this possible.

1. alignItems="flex-start" will allow grid items to stick to the top then fall towards the bottom.
2. direction="column" will change the flow of how items are "stacked" in a sense. This will change the sizing of the container and items that it is attached to so expect some xs={12} to turn into xs={6} and vice versa.

Here's the example code below as well as its implementation via sandbox.

import "./styles.css";
import { Grid } from "@material-ui/core";

export default function App() {
  return (
    <div className="App">
      <Grid alignItems="flex-start" container spacing={1}>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            x2
          </Grid>
        </Grid>
        <Grid container direction="column" item xs={6} spacing={1}>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y1
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y2
          </Grid>
          <Grid item xs={12} style={{ border: "1px solid black" }}>
            y3
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

How to align two React components horizontally?

Using Material-UI, you can use a Grid component and place two grid items occupying half the row size.

Material-UI has a 12 columns grid system (similar to bootstrap) which means for an item to occupy half the size, you give it a 6 columns size.

Check the item xs{6} below:

import React, { Component } from 'react';

import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const styles = theme => ({
  root: {
  flexGrow: 1,
},
paper: {
  padding: theme.spacing.unit * 2,
  textAlign: 'center',
  color: theme.palette.text.secondary,
},
});

class App extends Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>xs=6</Paper>
          </Grid>
        </Grid>
      </div>
  );
}
}

export default withStyles(styles)(App);

In your example, you are using xs={12} and that will make your item occupy all columns in the row forcing the next item to skip to the next line.

material-ui horizontally align two cards below first card

You can update your GraphBackDrop component to this:

export default function GraphBackDrop() {
  return (
     <Container>
        <Grid
          container
          spacing={3}
          justifyContent="center"
          alignItems="stretch"
        >
          <Grid item xs={12}>
            <YourCardOne />
          </Grid>
          <Grid item xs={12} sm={6}>
            <YourCardTwo />
          </Grid>
          <Grid item xs={12} sm={6}>
            <YourCardThree />
          </Grid>
        </Grid>
     </Container>
  );
}

Note: xs, sm, md, lg & xl are identified as breakpoints. It sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default).

If you want to learn more about MUI Grid component, refer to this official documentation.

---

Related Topics