[Grid] Container responsive queries

• I have searched the 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).

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>
  );
}

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.

Start with the Grid and Box component APIs and the linked CodeSandbox, then compare their viewport-based xs/md/lg behavior with the reported react-container-query usage. Done means responsive component behavior is driven by the containing panel rather than the window, including when the sidebar is opened or closed.