CODEWITHSUNDEEP
reactjsmaterial-ui
yemerra
yemerra

Reputation: 1342

Better way to position elements in a grid

I try to have a header on my application, where the left item (A) is aligned to the left side of the header, the second item (B) is in the center of the header and the third item is aligned to the right.

I tried a lot and found out that only this worked for me

const AppHeader = () => {
    return(
        <Grid container
              alignItems="baseline"
        >
            <Grid item xs={4}>
                <Grid container justify="flex-start">
                    A
                </Grid>
            </Grid>
            <Grid item xs={4}>
                <Grid container justify="center">
                    B
                </Grid>
            </Grid>
            <Grid item xs={4}>
                <Grid container justify="flex-end">
                    C
                </Grid>
            </Grid>
        </Grid>
    )
}

I think this is a ugly solution, because putting a container inside an item seems so unnecessary to me. Especially if we consider that this container has no grid items. I would really like to tell the item to align its content to a position. It would be better if this solution could be more like his:

 const AppHeader = () => {
        return(
            <Grid container
                  alignItems="baseline"
            >
                <Grid item xs={4} justify="flex-start">
                     A
                </Grid>
                <Grid item xs={4} justify="center">
                     B
                </Grid>
                <Grid item xs={4} justify="flex-end">
                     C
                </Grid>
            </Grid>
        )
    }

Is there a way to do something similar like that?

Upvotes: 0

Views: 277

Answers (1)

Anuj
Anuj

Reputation: 991

Assuming you are using material-ui Grid component. You can do something like this

<Grid container direction="row" justify="space-between" alignItems="center">
      <div>A</div>
      <div>B</div>
      <div>C</div>
</Grid>

CodeSandbox Link: https://codesandbox.io/s/small-haze-1wvtr

Upvotes: 1

Related Questions