当一个容器有足够的空间时，我希望子布局为两列，但是，如果没有足够的空间，则它们应该是两行，占据整个宽度。 （典型的响应式网格）
我可以使用媒体查询的常规方法执行此操作。但我想知道使用display:grid是否有更好的解决方案。特别是媒体查询仅在视口宽度下工作，并且希望它在容器级别上工作。 （避免使用诸如resizeObserver之类的JS解决方案）
我希望它的行为像这样：
如果有足够的空间（最小宽度：30em）：
A：列宽：10em + B：列最小20em
如果没有足够的空间（<30em）：
A（=行全宽）
B（=行全宽）
是否可以使用display:grid并且不进行媒体查询来完成此操作？这也应该适用于儿童之间的空间，例如grid-row-gap。