重复
- 我已经搜索了存在的问题
最新版本
- 我已经测试了最新版本
摘要💡
最新的CSS规范之一是@container查询，我相信它可以与网格组件无缝集成，从而带来真正独立的响应组件，而不管屏幕大小如何。
示例🌈
Grid的顶层api可以保持完全相同，以实现向后兼容。
可以引入一个新的isolated prop来表示@container的使用，如下所示：
<Grid container isolated>
<Grid item>
I don't care what screen size I'm in!
</Grid>
</Grid>我相信，在未来的道具应该设置为默认的true，但目前任何人都想选择在这个应用程序范围内可以覆盖他们的主题的defaultProps。
动机🔦
我发现自己不得不跟踪我在应用程序中使用每个组件的位置。
这意味着它们的实现和外观（在某种程度上）取决于它们的放置位置，这与组件一开始试图解决的隔离范例背道而驰。
3条答案
按热度按时间irlmq6kh1#
感谢您的反馈！我同意CSS容器查询会给布局带来很多好处。但是，我们应该具体说明容器查询+
Grid将解决的用例。您是否有使用
<Grid isolated>可以解决此问题的示例？也请先解释此问题。2w3rbyxf2#
你好，谢谢你调查此事！我很乐意进一步澄清。
我将试着用一个例子来演示这个问题，以这些人的输入为例：
出于演示目的，背景色为
lightblue。如果屏幕尺寸降到
sm以下，它们的字段将重新排列以容纳更紧凑的空间，如下所示：但是，对于初始屏幕大小，如果在它们旁边放置的组件占据了一半的宽度，则会发生以下情况：
由于屏幕大小没有改变，字段不再重新排列，但它们的容器大小已显著减小。它们不响应其容器，它们只响应屏幕。
如果字段对容器（而不是屏幕）的大小有响应，它们将如前所示重新排列自己，而不管周围有什么。
对于当前实现，此问题的解决方案是简单地重新排列断点，以便它专门用于占用视口宽度50%的新（假设）组件。
如果这个组件不需要显示，或者在使用过程中消失了呢？表单将扩展到占据整个屏幕，但字段将保持不变，就像它们仍然容纳着以前的紧凑空间一样。
它们的行为与其父组件无关，而是与屏幕有关。
我的想法并没有取代
containerprop或itemprop。我建议使用一个新的isolatedprop，它将与container一起工作，以指示对父对象使用新的containercss属性，对直接子对象使用@containercss查询。我说的是“直接”子元素，尽管这不是必需的，但是
@container的级联将在DOM树中向上查找，并将其自身应用于找到的第一个container元素。（在isolated成为默认值的情况下）“选择退出”使用查询，在它打算用于进一步嵌套的项的情况下。请让我知道，如果你需要任何进一步的澄清。我相信这个功能将是正确的在家里与响应设计概念，这个库提供如此毫不费力。
PS：
Stack大概应该服从这个建议。jgwigjjp3#
感谢@Exahilosys。我支持此更改，并在此处提供了当前断点问题的样板示例#34605