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

Question

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>

question from:https://stackoverflow.com/questions/65952035/how-to-put-two-items-in-one-column-as-rows-when-rest-should-be-columns-in-materi

Answer 1

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: