如果容器没有定义的高度，为什么CSS网格项不换行？

我有一个网格布局中的项目列表，网格容器有一个宽度集，但没有高度集

我希望项目填充列，直到达到容器宽度，然后换行

但现在我只能在容器上定义一个高度的情况下才能让它工作

下面是一个片段

除非取消对容器的

height

规则的注释，否则网格项永远不会换行，但我希望容器在换行网格后能够增大/缩小

.box{
高度：150像素；
宽度：150px；
背景色：红色；
}
.集装箱{
宽度：500px；
/*高度：500px*/
背景颜色：蓝色；
显示：网格；
网格自动流：列；
网格间距：5px；
网格模板行：重复（自动填充，最小值（150px，1fr））；
}

我希望项目填充列，直到达到容器宽度，然后换行

那么为什么要使用

网格自动流：列

和

网格模板行

使用

网格自动流动：列

网格项将垂直流动，填充行，然后创建新列。您的意思是想要相反的结果：填充列，然后创建新行。因此，请坚持使用默认值，

网格自动流：行

沿着相同的线路，从

网格模板行

切换到

网格模板列

。您希望自动填充列，而不是行

网格容器上不需要任何高度

事实上，您也不需要项目的宽度或高度

.container{
显示：网格；
网格模板列：重复（自动填充，最小值（150px，1fr））；
网格自动行：150px；
网格间距：5px；
宽度：500px；
背景颜色：蓝色；
}
.盒子{
背景色：红色；
}