I am currently working on a Grid layout project that involves a Grid container with four Grid items. The first Grid item takes up the full width and contains a title, while the other three Grid items contain avatars. My goal is to align the avatars to the right side of the page and have the title positioned to align with the left-most avatar. However, there seems to be an issue where the title is further to the left than the avatars. Also, the number of avatars can vary, making it challenging to achieve the desired alignment. Can you assist me in ensuring that the left-most avatar and title align perfectly?
Below is the current result I am getting:
https://i.sstatic.net/zyGl2.png
And here is the desired outcome:
https://i.sstatic.net/x75hn.png
Here is the code snippet I am working with:
import React from "react";
import { Grid, makeStyles, Typography, Divider, Avatar } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
header: {
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
flexGrow: 1,
},
}));
const Header = ({ padding }) => {
const classes = useStyles();
return (
<>
<Grid
container
item
direction="row"
justify="space-between"
align-items="center"
xs={12}
className={`${padding} ${classes.header}`}
>
{/*Page title and description*/}
<Grid item xs>
<Typography variant="h1" component="h1">
Page Title
</Typography>
<Typography variant="body1">
This is a description of what the page is about
</Typography>
</Grid>
{/*People container*/}
<Grid item xs className={classes.smeSection} alignItems="bottom">
{/*People profiles*/}
<Grid container item justify="flex-end" alignItems="bottom">
<Grid item xs={12}>
<Typography variant="h5">People</Typography>
</Grid>
<Grid item>
<Avatar/>
</Grid>
<Grid item>
<Avatar/>
</Grid>
<Grid item>
<Avatar />
</Grid>
</Grid>
</Grid>
</Grid>
<Divider />
</>
);
};
export default Header;
Thank you for your assistance!
Best regards, Katie