CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
joba2ca
joba2ca

Reputation: 366

Align React Material UI Grid with different number of rows per column

Aim

I want to create a component that contains information about a device, an icon, and its status. Example:

enter image description here

What I tried

I want to achieve this by creating a MUI Grid that looks like a 2x2 grid, except the first column consists of one cell containing the icon, which has the height of two cells.

Problem

I can get a three-cell layout using a MUI Grid, but I am unable to expand the cell that should cover two rows. It currently is the top-left cell, instead of covering the top-left and bottom-left cells. If this cannot be achieved with a MUI Grid, I would be glad to hear alternative suggestions.

Code

<div>
  <Grid container spacing={24}>
    <Grid item xs={6}>
      <Paper>Display a MUI Icon over two rows instead of one</Paper>
    </Grid>           
    <Grid item xs={6}>
      <Grid container spacing={24}>
        <Grid item xs={12}>
          <Paper>Top right</Paper>
        </Grid>
        <Grid item xs={12}>
          <Paper>Bottom right</Paper>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</div>

Upvotes: 0

Views: 1838

Answers (2)

Pavan Nagadiya
Pavan Nagadiya

Reputation: 682

I check your code and the issue is that you are using two different container but as per your requirement you can make it using one main container and after you can use the second container.

I made a demo for you.

<div className="App">
  <Grid container sx={{ m: 1, p: 2 }}>
    <Grid
      item
      xs={6}
      style={{
        backgroundColor: "red",
        display: "flex",
        alignItems: "center"
      }}
    >
      Display a MUI Icon over two rows instead of one
    </Grid>
    <Grid item xs={6} style={{ backgroundColor: "green" }}>
      <Grid container direction="column">
        <Grid item>Top right</Grid>
        <br />
        <br />
        <Grid item>Bottom right</Grid>
      </Grid>
    </Grid>
  </Grid>
</div>

Upvotes: 1

user00hayamania
user00hayamania

Reputation: 11

I would do this by using Grid and Stack.

        <Grid container sx={{ m: 1, p: 2 }}>
      <Grid item xs={6}>
        <Paper>Display a MUI Icon over two rows instead of one</Paper>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <Paper>Top right</Paper>
          <Paper>Bottom right</Paper>
        </Stack>
      </Grid>
    </Grid>

CodeSandBox is here.

Upvotes: 1

Related Questions