CSS Grid Using Material-UI and React

Question

I wanted to achieve this layout below on the picture with the cards. I wanted to fill out the whole page just like in the picture. I don't know if Grid is the way to go here or using CSS Grid will be better like grid-template-columns ? Please check my codesandbox below.

CLICK HERE: Codesandbox

<Grid sx={{ background: "silver", height: "100vh" }} container spacing={2}>
      <Grid item xs={12}>
        <Grid container spacing={2}>
          <Grid item>
            <Card>
              <CardHeader sx={{ height: "100px", width: "300px" }} />
              <CardContent sx={{ height: "100px" }}></CardContent>
            </Card>
          </Grid>
          <Grid item>
            <Card>
              <CardHeader sx={{ height: "100px", width: "300px" }} />
              <CardContent sx={{ height: "100px" }}></CardContent>
            </Card>
          </Grid>
          <Grid item>
            <Card>
              <CardHeader sx={{ height: "100px", width: "300px" }} />
              <CardContent sx={{ height: "100px" }}></CardContent>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

Answer 1

Since you include CSS tag, here's a pure CSS solution using grid . Check the snippet( Full page ) below:

 * { margin: 0; padding: 0; box-sizing: border-box; }.container { display: flex; flex-direction: column; padding: 5px; height: 100vh; gap: 5px; background: #F5F5F5; }.header { width: 100%; height: 20%; background: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }.hr { width: 100%; height: .15rem; margin-bottom: .1rem; border-bottom: 1px solid #F1F1F1; }.grid { height: 100%; gap: .5rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }.grid>div { background: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }.grid>div:nth-of-type(4) { grid-column: span 2; grid-row: span 2; }.grid>div:nth-of-type(5) { grid-row: span 2; }

 <div class="container"> <div class=header></div> <div class="hr"></div> <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

** Used height: 100vh; for container 's here btw.

More on grid here .