Problem

I cannot work how to get a Grid container element to stretch to the height and width of it's parent element without modifying the height and width using the style prop or editing the style with the makeStyles/useStyles hook.

I am sure there has to be a simpler way. I have created a sandbox with what I would like (written with vanilla React) and what I have so far (written with Material UI ponents).

The reason I am not just using regular Box ponents is due to of the lack responsive controls it has in parison to Grid.

Example

Codesandbox

Problem

I cannot work how to get a Grid container element to stretch to the height and width of it's parent element without modifying the height and width using the style prop or editing the style with the makeStyles/useStyles hook.

I am sure there has to be a simpler way. I have created a sandbox with what I would like (written with vanilla React) and what I have so far (written with Material UI ponents).

The reason I am not just using regular Box ponents is due to of the lack responsive controls it has in parison to Grid.

Example

Codesandbox

• javascript
• css
• reactjs
• material-ui

1 Answer 1

I was overplicating things and under appreciating the power of Box.

Box is responsive. My takeaway is to use Grid sparingly on items that have heights and widths and use Box in bination with the Hidden for screen layouts.

import React from "react";
import { Box } from "@material-ui/core";

export default function Layout() {
  return (
    <Box bgcolor="green" display="flex" height="100vh" width="100vw">
      <Box bgcolor="red" flex={{ xs: 1, sm: 2 }} />
      <Box
        bgcolor="yellow"
        display="flex"
        flex={1}
        flexDirection={{ xs: "column", sm: "row" }}
      >
        <Box bgcolor="blue" flex={{ xs: 1, sm: 6 }} />
        <Box bgcolor="purple" flex={{ xs: 11, sm: 6 }} />
      </Box>
    </Box>
  );
}