Repository: material-ui
Issue: [Grid] Container responsive queries
Labels: new feature,component: Grid

<!-- Provide a general summary of the feature in the Title above -->


<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Summary 💡

Hi, I started a project with react-splitter-layout and material ui library. 
I would like to find a way to create responsive components, with material ui Grid or Box component

I encounter a problem with responsive, I would like my left panel to be responsive (use of xs / md / lg) with Grid component based on the size of the container (not window size), as you can see in the example below , this is not the case. It's use the viewport size. (I know it's normal because of media queries). 



<!-- Describe how it should work. -->

## Examples 🌈
Here the code sample : https://codesandbox.io/s/material-demo-i04rr?file=/demo.js (recommended to open the rendering in a new tab to see the problem)

```
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import SplitterLayout from "react-splitter-layout";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default function CenteredGrid() {
  const classes = useStyles();

  return (
    <SplitterLayout>
      <div className={classes.root}>
        <Grid container spacing={3}>
          <Grid item xs={4} md={6} lg={8}>
            <Paper className={classes.paper}>xs=3</Paper>
          </Grid>
          <Grid item xs={4} md={4} lg={2}>
            <Paper className={classes.paper}>xs=3</Paper>
          </Grid>
          <Grid item xs={4} md={2} lg={2}>
            <Paper className={classes.paper}>xs=3</Paper>
          </Grid>
        </Grid>
      </div>
      <div>Panel 2</div>
    </SplitterLayout>
  );
}
```
<!--
  Provide a link to the Material design specification, other implementations,
  or screenshots of the expected behavior.
-->

## Motivation 🔦

In my project the user can open/close the right panel like a sidebar/drawer with a button located on the topbar. So, everything on the left should be responsive.(When sidebar is closed the left side == screen size) Just like on the codesandbox UI, they have a code part and a rendered part, the rendering is displayed inside an iframe and when you dragging in the middle the content adapts to different devices. I would like something similar but without using an iframe.
Actually, I'm using react-container-query, but it doesn't meet all of my needs.

<!--
  What are you trying to accomplish? How has the lack of this feature affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->