CODEWITHSUNDEEP
javascriptreactjsflexboxmaterial-ui
Katie7
Katie7

Reputation: 879

How do I align two Grid items left and one right in Material UI when the first Grid item is a fixed width?

I am using Material UI and have a Grid container which contains three Grid items. The furthest left item should have a fixed width of 240px and the contents should be left aligned. The middle Grid item should be justified to the left and can be any width - the content contains some buttons (which I have left out of the code below) and should be left aligned. The right Grid item should be right aligned and ideally be about 240px or a proportion of the screen (e.g. xs="3"). It must be mobile responsive. Here's a picture:

enter image description here

I have tried using justify="flex-end" and justify="space-between" but the trouble is that it messes up the layout. The contents end up stacking on top of each other. Can anyone recommend a good approach?

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  root: {
    minHeight: 40,
    alignItems: 'center',
    padding: theme.spacing(0, 2),
  },
  fixedWidthContainer: {
    width: '240px',
  },
  titleSpacing: {
    marginRight: theme.spacing(2),
  },
}));

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

  return (
    <Grid container className={classes.root}>
      <Grid item className={classes.fixedWidthContainer}>
        <Typography variant="body2">
          Title: MyTitle
        </Typography>
      </Grid>
      <Grid item>
        <Typography
          className={classes.titleSpacing}
          variant="body2"
          component="span"
        >
          Some stuff to go on the left
        </Typography>
      </Grid>
      <Grid item className={classes.fixedWidthContainer}>
        Some stuff to go on the right
      </Grid>
    </Grid>
  );
};

export default AdminBar;

Many thanks,

Katie

Upvotes: 0

Views: 10745

Answers (1)

Rajiv
Rajiv

Reputation: 3772

provide the size ration to the Grid items as you want. like for the side items provide xs={3} and for center item set flex-grow:1.

<Grid container className={classes.root}>
  <Grid item xs={3} className={classes.fixedWidthContainer}>
    <Typography variant="body2">Title: MyTitle</Typography>
  </Grid>
  <Grid item style={{ flexGrow: "1" }}>
    <Typography
      className={classes.titleSpacing}
      variant="body2"
      component="span">
      Some stuff to go on the left
    </Typography>
  </Grid>
  <Grid xs={3} item className={classes.fixedWidthContainer}>
    Some stuff to go on the right
  </Grid>
</Grid>

Sandbox link:- https://codesandbox.io/s/xenodochial-flower-ge65z

Personal Opinion:- It'd be better to use just div and then style them accordingly in this case, as you've fixed-width requirement here. I've added this method in the sandbox

Upvotes: 3

Related Questions