Material UI - How to stretch Grid container to parent height and width

1
votes

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 components).

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

Example

Codesandbox

1
javascriptcssreactjsmaterial-ui

1 Answers

1
votes

I was overcomplicating 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 combination 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>
  );
}