4

I am using material ui Grid component to create a responsive grid layout. And I want to align the content inside grid depending on the screen size - alignt left for xs and align right for md. How do I do that?

I used xs and md breakpoints to divide the grid depending on screen size. Used material-ui-grid doc. The documentation also mentions a property called align-items-xs-flex-start. So I gave align-items-xs-flex-start and align-items-md-flex-end as props to Grid component to see if the content is aligned to left in xs and right in md. But it didn't work.

Some example code.

<Grid>
  <Grid xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

On a medium sized screen, I want John Doe to be aligned right. On a small sized screen, I want John Doe to come to next line and align to left. When I tried using align-items-xs-flex-start and align-items-md-flex-end, it's still aligned to left in both cases.

troglodyte07
  • 3,598
  • 10
  • 42
  • 66

3 Answers3

1

I know this is a old issue, but just in case somebody reach here looking for a solution, as I do, I found this article of Monica M. where it explained very well how use sx, in general, and how add different styles for different breakpoint.

https://blog.devgenius.io/how-to-use-the-sx-prop-in-mui-v5-4ccfd588836

justifyContent:{ xs: start, md: 'center'}

Just make sure you set properties for each breakpoint. In other xs property will be set as default for the others one.

Agustín Carmona Parrado
  • 11
  • 2
0

Not sure if you solved this in the end? I'll answer anyway in case anyone else has themselves a similar problem:

You can then use Material UI breakpoints to set different styles for different sizes. For example, for your text alignment example, you would need something like this:

    [theme.breakpoints.down('sm')]: {
      textAlign: left,
    },
    [theme.breakpoints.up('md')]: {
      textAlign: center,
    }

Also, in case anyone gets confused by your example, they should know that the Grid elements should have the container and item properties to display correctly:

<Grid container>
  <Grid item className="grid-el" xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid item className="grid-el" xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

More information on breakpoints: https://material-ui.com/customization/breakpoints/

Oli C
  • 1,120
  • 13
  • 36
  • There is an attribute for named justify={"flex-start"|"flex-end"|...etc...}, the question was regarding if you can have the justify attribute work differently for xs and for md . – James Roeiter Jul 25 '21 at 14:11
  • Thanks, but they don't mention the justify attribute...They ask how to align the content inside a grid depending on the screen size. If you have a better way to do it, leave an answer with example code! – Oli C Jul 27 '21 at 14:48
0

You can do like that:

<Grid container sx={{display:'flex', justify-content:{xs:'center', md:'flex-start'}}}>
  <Grid item className="grid-el" xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid item className="grid-el" xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>
DSDmark
  • 1,045
  • 5
  • 11
  • 25
Milind D
  • 1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – DSDmark Jun 11 '23 at 13:07