Html 当原始行上留给第二个网格项的空间低于某个数量时，如何将其换行到新行？

.wrapper{
宽度：500px；
边框：5px纯红；
显示：网格；
网格模板列：最大内容
重复（自动装配，最小值（70px，1fr））；
网格自动列：1fr；
}
.wrapper>*：第n个子项（1）{
背景颜色：紫色；
宽度：200px；
}
.wrapper>*：第n个子项（2）{
背景颜色：橙色；
}

A.
B

这不是CSS网格作业，而是flexbox作业

.wrapper{
边框：5px纯红；
显示器：flex；
柔性包装：包装；
}
.wrapper>*：第n个子项（1）{
背景颜色：紫色；
宽度：200px；
}
.wrapper>*：第n个子项（2）{
背景颜色：橙色；
弹性基础：70像素；
柔性生长：1；
}

A.
B

你不能，这不是css网格的工作方式好吧，看了这段视频（2分钟标记），认为css grid@tonitone120实现了类似的效果。没必要看，css grid不是一个合适的工具。如果你想处理包装和不同宽度的元素，忘记CSS网格吧。谢谢你的回答。我想在第二个GI放在自己的行上后，用CSS对其进行更改。你能想到用Flexbox或其他任何东西来“注意”这一点吗？@tonitone120你在寻找什么样的变化？每个flex项目都可能是它自己的Flexbox，所以变化使其flex项目的位置不同。例如，当第二个元素与第一个元素位于同一行时，将垂直放置其弹性项。当在自己的行上时，它将水平放置其项目。