Objective
My goal is to design a component that showcases details about a device, including an icon and its current status. For instance:
Approach I've Taken
I am attempting to accomplish this by structuring a MUI Grid in the form of a 2x2 grid layout, with the first column containing one cell specifically for the icon. This particular cell should span the height of two cells.
Challenge Faced
Although I have managed to create a three-cell layout using a MUI Grid, I am struggling to expand the cell so that it covers two rows instead of just one. Currently, it occupies the top-left position rather than stretching across both the top-left and bottom-left cells. If achieving this layout with a MUI Grid is not feasible, I would appreciate alternative suggestions.
Code Snippet
<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>