CODEWITHSUNDEEP
javascriptreactjsmaterial-uijss
Davis Jones
Davis Jones

Reputation: 1882

How to Align One Item Left, and Another Right using Material UI Grid Components

I'm having a very difficult time trying to achieve something simple with the Grid Component from MaterialUI. Specifically, I'd like to align one item to the left, and another to the right on one layout row.

I've searched extensively, and have not found any solutions that work. I've tried many suggestions, including the use of justifyContent and alignContent within a Grid component, and within JSS, and the flex: 1 technique of 'pushing' content.

Relevant Code Snippets

Trying to put the <Typography> element on the left, and the <FormGroup> on the right:

<Container>
  <Grid container spacing={3}>
    <Grid className={classes.rowLayout}>
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>

MaterialUI JSS styling:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
  rowLayout: {
    display: 'flex',
    alignItems: 'baseline'
  },
}));

I'm also finding that, generally speaking, this is requiring the use of many Grid components, and I'd love to write cleaner code if possible.

Do you have any tips or fixes to this problem?

Thanks a million,

Davis

Upvotes: 7

Views: 26695

Answers (5)

Doan Thai
Doan Thai

Reputation: 685

With case only single Grid, you just need justifyContent: 'space-between' for parent Grid.

<Grid item xs={4} sx={{ display: 'flex', justifyContent: 'space-between' }}>
  <Typography>Left</Typography>
  <Typography>Right</Typography>
</Grid>

Upvotes: 0

schwartz
schwartz

Reputation: 485

I have solved a similar issue using justifyContent on each of the Grid items.

<Container>
  <Grid container spacing={3} alignItems="baseline">
    <Grid item xs={6} sx={{
      justifyContent: "flex-start"
    }}>
      <Typography variant="h6" gutterBottom>Some Text</Typography>
    </Grid>
    <Grid item xs={3} sx={{
      display: "flex",
      justifyContent: "flex-end"
    }}>
      <FormGroup>
        <Typography variant="h6" gutterBottom>Some Switch</Typography>
      </FormGroup>
    </Grid>
  </Grid>
</Container>

This page gives you a really good visually interpretation of how flex works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Aayush Sharma
Aayush Sharma

Reputation: 167

I used a different approach to list one grid item to right. Similar approach can be use to show grid items to right and one at left.

<Grid container>
  <Grid item>Left</Grid>                          
  <Grid item xs>                                 
    <Grid container direction="row-reverse">      
      <Grid item>Right</Grid>
    </Grid>
  </Grid>
</Grid>

Upvotes: 9

Zane
Zane

Reputation: 421

I'm using this at the moment and it works well to align one to the far left, and one to the far right.

Inspired from: How to align flexbox columns left and right?

const useStyles = makeStyles((theme) => ({
  right: {
    marginLeft: 'auto'
  }
}));

<Grid container alignItems="center">
  <Grid>
    <Typography variant="h4" component="h4">Left</Typography>
  </Grid>
  <Grid className={classes.right}>
    <Button variant="contained" color="primary">Right</Button>
  </Grid>
</Grid>

Upvotes: 14

niconiahi
niconiahi

Reputation: 554

I think the best option here is to use flex like this:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
  rowLayout: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center' // To be vertically aligned
  },
}));

As a second choice (and for me the best since you are using Material UI at its fullest expression which if you are using it, it's the best thing to do. Use the library as much as you can) you could do something like this:

<Container>
  <Grid container spacing={3}>
    <Grid container direction="row" justify="space-between" alignItems="center">
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>

Upvotes: 4

Related Questions