How to Align React Material UI Grid with Varying Row Counts in Each Column

Objective

My goal is to design a component that showcases details about a device, including an icon and its current status. For instance:

https://i.sstatic.net/UhpnG.png

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>
htmlcssreactjsmaterial-ui

Answer №1

After reviewing your code, the issue seems to be arising from using two different containers. However, you can achieve the desired outcome by utilizing one main container and then incorporating the second container as needed.

To further illustrate this concept, I have created 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>

Answer №2

To achieve this layout, I would utilize the power of Grid and Stack components.

        <Grid container sx={{ m: 1, p: 2 }}>
      <Grid item xs={6}>
        <Paper>Displaying a Material-UI Icon across two rows instead of one</Paper>
      </Grid>
      <Grid item xs={6}>
        <Stack>
          <Paper>Top right corner</Paper>
          <Paper>Bottom right corner</Paper>
        </Stack>
      </Grid>
    </Grid>

You can view the CodeSandBox demo here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display two items from a list while hiding the rest?

I received a list generated from the backend that looks like this: <ul> {% for item in items %} <li>{{item }}</li> {% endfor %} </ul> My goal is to display only the first two items and collapse the rest, possibly with a 's ...

jqueryhtmlcsstwitter-bootstrap-3

"Centered in the middle of the screen, an animated

Encountering an issue with this code on Chrome. Clicking on the checkbox causes the text/checkbox to shift in position/padding/margin unexpectedly.. :( View the code on JSFiddle HTML <input id="inp" type="checkbox" /> <div id="cb" class="inp_ch ...

javascriptjqueryhtmlcss

Accessing and showcasing MySQL information using hidden forms

I'm facing an issue with displaying the selected data from MYsql. The values are stored in my database fields, and I want the review of the chosen movie to show up when the user clicks the submit button, but it's not working as expected. Below i ...

phphtmlmysql

Incorporating .SVG files on an HTML webpage for logos and icons

Is it acceptable to use .SVG images for logos and icons in design? If so, how can I ensure that they are supported by all browsers? If I use a .SVG image on my website, it may not be supported on Internet Explorer. How can I resolve this issue? <img ...

htmlcsssvg

Adjust the code to enhance the functionality of web components in Sharepoint

I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...

javascriptjqueryhtmlcsssharepoint

Detecting file corruption from a form-based web page file upload (using input type="file")

Can file corruption occur during the process of uploading a file through a web form? Specifically, when an input of type "file" is included in a form submission and the file is saved on the server (typically in a designated temporary upload directory). Is ...

htmlformsfile-uploadcorruption

What is the best way to develop a script allowing users to input an email address and send them a pre-written email message?

I am currently working on a webpage where users can input the following details: 1. First Name 2. Email Address 3. Recipient's Email Address After entering this information, they will be able to send a pre-defined email message which reads ...

phphtmlemailformssend

Expanding the width of an image beyond its parent <div> without compromising on vertical space

Is it possible to have a child <img> wider than its parent div, while maintaining proportional width and preserving vertical space? Using position:absolute; might move the image out of the normal document flow, but I want to keep the vertical space ...

htmlcss

Exploring type definition for function arguments in TypeScript and React

There is a high-order component (HOC) designed to store the value of one state for all input and select elements. The output function accepts arguments ({text: Component, select: Component}). An error is displayed while typing an argument: TS2322: Type &ap ...

reactjstypescripttypescript-typings

What is the importance of moving prop types into a type or interface in React components?

Consider the scenario where I have a functional component: const MyText = ({ value }) => ( <div className="my-fancy-text">{value}</div> ); Now, when utilizing Typescript, I face the need to introduce typing. A straightforward ...

reactjstypescript

Is there a way to apply textTransform to all components across the board?

I need to ensure that all text in my muiv5 project is capitalized by default, unless specifically overridden using sx or individual component styling. My attempted solution: <ThemeProvider theme={theme}> <IntlProvider locale="en& ...

cssreactjsmaterial-uinext.js

Can you explain the distinction between the onclick(function(){}) and on('click',function(){}) functions in jQuery?

My goal is to dynamically load pages into a specific div using ajax. Here's my HTML code: <ul id="nav" class="nav" style="font-size:12px;"> <li><a href="#" id="m_blink">Tab1</a></li> <li><a href="#" id= ...

javascriptphpjqueryhtmlajax

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

The Django template fails to implement CSS styling

I am trying to apply text-align: justify and reduce the text width on a Django template file, but it seems that my CSS isn't working for only this specific element. I have no idea how to solve this issue even though my static files and direction are f ...

htmlcssdjangodjango-templates

Send a parameter to the state from the component to access the object property key within a React array

I am managing a state that contains an array of objects: const [Value, setValue] = useState([{ Width: null, Length: null }, { Width: null, Length: null }]) In addition, I have a component where I need to retrieve the value for Value using the setValue fun ...

reactjsreact-hooks

What are some effective strategies for enhancing the performance of React user interfaces?

I'm currently dealing with a performance challenge in one of my React applications. What are some best practices to enhance the responsiveness of the User Interface? One approach could be to minimize the usage of conditional expressions like { carIsR ...

javascriptperformancereactjsjsx

What is the best way to reset Material UI LinearProgress once it has finished?

I have a progress bar that goes from 0 to 100 over the course of a few seconds, then resets back to 0 and repeats the process. <LinearProgress variant="determinate" value={progress}/> Initially, the animation looks great. However, after r ...

material-uiprogress-bar

Exploring the diversity of perspectives through Angular

Currently, I am in the process of integrating multiple views in Angular to address the footer issue on a website that I am constructing. I want to ensure that the information I have been studying and attempting to replicate is accurate. Here is what I have ...

javascripthtmlangularjs

A web address shared in a post appears within the nested frame of an iframe

I'm encountering a somewhat confusing issue. I am attempting to submit a URL to an iframe located on the same page. Upon clicking submit, the iframe replicates the current page, but with the correct URL displayed in the duplicated iframe. It's ma ...

phphtmlformsiframe

The words run out before the paper does. Keep reading for more details

While updating the CSS on my blog, I ran into an issue where the text in my posts is not extending all the way to the end. To see what I'm experiencing, check out this image- I really need the text to align properly and reach the full width of the p ...

htmlcssblogger