[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.

[ianschmitz]

Container queries are available in Chromium as well as Safari. No impl. in Firefox but looks like they’re working on it!

https://caniuse.com/css-container-queries https://bugzilla.mozilla.org/show_bug.cgi?id=1744221

[oliviertassinari]

@Mistes974 I had a quick play with the API, to see a bit how it feels like right now:

import * as React from "react";
import { styled } from "@mui/system";

const Container = styled("div")({
  display: "flex",
  flexWrap: "wrap",
  gap: 4,
  containerType: "inline-size"
});

const Item = styled("div")(({ theme }) => ({
  background: "#e4bebb",
  width: "100%",
  [theme.breakpoints.up("sm").replace("@media", "@container")]: {
    width: "calc(50% - 4px)"
  },
  [theme.breakpoints.up("md").replace("@media", "@container")]: {
    width: "calc(100% / 4 - 12px)"
  }
}));

export default function GridSimple() {
  return (
    <Container>
      {new Array(10).fill().map(() => (
        <Item>test case</Item>
      ))}
    </Container>
  );
}

https://codesandbox.io/s/pedantic-bardeen-b9ghp5?file=/src/App.js

A few ideas:

1. We might want to add an equivalent helper to theme.breakpoints.up, e.g. theme.query.container.up("md") or to make it configurable, theme.breakpoints.up("md", { container: true }).
2. The sx prop could benefit from a breakpoint. I’m not sure about the API. e.g. <Box sx={{ width: { xs: 0, container: true } }} />

---

But in any case, this is off-topic to this issue. This issue is about the Grid component.