CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Magofoco
Magofoco

Reputation: 5466

When to use Grid item vs when not to use Grid Item to align and justify

I am curious about when I should use Grid item in order to take advantage of the Grid container props such as justify or alignItems. I was under the impression that these attributes can be only applied to the Grid item inside the Grid container. However, it does not seem so from my example (see: "option two).

For example, let's consider this simple scenario: I want a way to display three Typography text, one next the other with some space in between.

Option one: https://codesandbox.io/s/naughty-tharp-0tof1

export default function App() {
  return (
    <Grid
      container
      direction="row"
      justify="space-between"
      style={{ minHeight: "100px", backgroundColor: "yellow" }}
    >
      <Grid item>
        <Typography> First text </Typography>
      </Grid>
      <Grid item>
        <Typography> Second text </Typography>
      </Grid>
      <Grid item>
        <Typography> Third text </Typography>
      </Grid>
    </Grid>
  );
}

Option two: https://codesandbox.io/s/romantic-northcutt-kjbef

export default function App() {
  return (
    <Grid
      container
      direction="column"
      justify="space-between"
      style={{ minHeight: "100px", backgroundColor: "yellow" }}
    >
      <Typography> First text </Typography>
      <Typography> Second text </Typography>
      <Typography> Third text </Typography>
    </Grid>
  );
}

Why does justify and direction works directly on Typography as in option two? Should not they only work on Grid item?

Upvotes: 0

Views: 39

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

Ciao, the Grid css will be applied to all Grid's children (independently if children are Grid item or Typography).

To explain better what I'm saying lets inspect your codesandbox examples:

Option one:

enter image description here

Option two:

enter image description here

In both cases, the div father (MuiGrid-root) will apllies his style to children.

Upvotes: 1

Related Questions