Use @container instead of @media query for Grid

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Among the latest CSS specifications is the @container query which I believe could be seamlessly integrated with the Grid component to bring truly isolated responsive component irregardless of screen size.

Examples 🌈

The top-level api for Grid could remain the exact same for backwards compatibility.

A new isolated prop could be introduced to signal the usage of @container like so:

<Grid container isolated>
  <Grid item>
    I don't care what screen size I'm in!
  </Grid>
</Grid>

I believe that in the future the prop should be set to true by default, but for the time being whoever wants to opt-in to this app-wide could override their theme's defaultProps.

Motivation 🔦

I have found myself having to keep track of where I use each component in my app.

This means that their implementation and appearance is (to some degree) dictated by where they are placed, which goes against the isolation paradigm that components are trying to solve to begin with.

Start with the Grid component and its current responsive @media-query behavior, then trace how the container and item variants are wired. Define how an opt-in isolated prop should use @container while preserving the existing API, and verify that responsiveness follows the component container rather than the viewport.