CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-native
SJ19
SJ19

Reputation: 2123

ReactJS / Javascript: Grid item - Can't vertically center and set display at the same time

I'm having an issue with Grid I can't wrap my head around.

If I add the display constraints, eg. display={{ xs: "none", sm: "block" }}, I can't seem to vertically center my grid item.

If I remove display, I can vertically center the grid item by adding direction=column and justifyContent=center.

How can I do both at the same time? I want to hide the green box on xs, and also have its content vertically centered.

enter image description here

I've made a code sandbox where I simulated my issue:

https://codesandbox.io/s/silly-hodgkin-koybrj

<Grid item container>
    <Grid
      item
      container
      sx={{
        height: 100,
        bgcolor: "red"
      }}
      xs={6}
    >
      I am high
    </Grid>

    <Grid
      item
      container
      xs={6}
      sx={{
        bgcolor: "green",
        flexDirection: "column",
        justifyContent: "center"
      }}
      display={{ xs: "none", sm: "block" }} // this grid item is vertically centered if this line is commented out
    >
      Vertically center me
    </Grid>
</Grid>

Upvotes: 0

Views: 28

Answers (1)

Talya Sterman
Talya Sterman

Reputation: 215

change the sm to "flex"

Upvotes: 1

Related Questions