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.