CODEWITHSUNDEEP
javascriptreactjsmaterial-uigrid
browinski
browinski

Reputation: 21

How to put two items in one column as rows when rest should be columns in MaterialUI Grid?

I want to put my arrows where one is on top, second one is down. How can I do that in MaterialUI grid?

Below I've attached a picture of what I have now and what I do want to reach.

My code:

<Paper className={classes.paper}>
      
    <Grid container spacing={2}>
      <!-- here -->
      <Grid item>
        <ButtonBase className={classes.image}>
            <ArrowUpwardIcon/>
        </ButtonBase>
      </Grid>
      <Grid item>
        <ButtonBase className={classes.image}>
            <ArrowDownwardIcon/>
        </ButtonBase>
      </Grid>
     <!-- end-->
      <Grid item>
        <ButtonBase className={classes.image}>
          <img className={classes.img} alt="complex" src="https://amadeuscontenthub.pl/wp-content/uploads/2019/08/Silhouette-of-an-airplane-just-after-take-off-during-sunset-640x377.jpg" />
        </ButtonBase>
      </Grid>
      <Grid item xs={12} sm container>
        <Grid item xs container direction="column" spacing={2}>
          <Grid item xs>
            <Typography gutterBottom variant="subtitle1">
                {ArticlePreview.title}
            </Typography>
            <Typography variant="body2" gutterBottom>
                {ArticlePreview.description}
            </Typography>
          </Grid>
          <Grid item>
            <Typography variant="body2" style={{ cursor: 'pointer' }}>
                <MessageIcon/> 2137 comments
            </Typography>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  </Paper>

What do I want

Upvotes: 0

Views: 84

Answers (2)

Rajiv
Rajiv

Reputation: 3772

a simple approach to solve this issue is to create another Grid container inside the main parent Grid container. Then inside that new container put those two icons as grid items.

{/* <!-- here --> */}
<Grid item style={{ alignSelf: "center" }}>
  <Grid container direction="column">
    <Grid item>
      <ButtonBase className={classes.image}>
        <ArrowUpward />
      </ButtonBase>
    </Grid>
    <Grid item>
      <ButtonBase className={classes.image}>
        <ArrowDownward />
      </ButtonBase>
    </Grid>
  </Grid>
</Grid>
{/* <!-- end--> */}

Here is a working demo:

Edit festive-greider-klhx1

Upvotes: 2

Sean
Sean

Reputation: 29

Try this

    <Grid container item direction="column">
        <ButtonBase className={classes.image}>
            <ArrowUpwardIcon/>
        </ButtonBase>
        <ButtonBase className={classes.image}>
            <ArrowUpwardIcon/>
        </ButtonBase>
    </Grid>

Upvotes: 0

Related Questions