Html 具有任意列数且不进行换行的网格容器

我需要显示任意数量的

网格模板列

我尝试了

网格模板列：repeat（自动填充，100px）

，但这会包装超出其父行宽度的任何行

设置一个较大的上限，如：

grid-template-columns:repeat（999，100px）

，是可行的，但似乎应该有更好的方法

下面是我正在使用的示例：

.grid-1{
显示：网格；
网格模板列：重复（自动填充，100px）；
宽度：300px；
边框：1px实心#000；
}
.grid-2{
显示：网格；
网格模板列：重复（999，100px）；
宽度：300px；
边框：1px实心#000；
溢出：自动；
}
.栏目{
显示：网格；
网格模板行：重复（12，1fr）；
}

Auto fill接受任意数字，但换行。
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一个大的上限是可行的，但我正在寻找一个更好的方法。
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二

您可以使用flexbox实现这一点，只需将flex项设置为无增长、无收缩、固定宽度元素即可

.grid-1{
显示器：flex；
宽度：300px；
边框：1px实心#000；
溢出：自动；
}
.栏目{
flex:0100px；
}

1234
五、七、七、89101112
1234
五、七、七、89101112
1234
五、七、七、89101112
1234
五、七、七、89101112

不要使用。定义中的列轨迹，该轴网是您显式定义的轴网

相反，使用。定义中的列轨迹，这些列轨迹是在显式网格外部自动创建的列/行

换句话说，使用

grid auto columns

，您不需要定义任何数量的列。只需让网格容器根据需要创建它们

然后，要保持所有列水平流动，请将它们全部设置为

网格行：1

.grid{
显示：网格；
网格自动列：100px；
宽度：300px；
溢出：自动；
边框：1px实心#000；
}
.栏目{
网格行：1；
}

一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二
一
二
三
四
五
六
七
八
九
十
十一
十二

我链接的笔应该有助于解释。下面的示例正是我想要实现的，但我认为应该有更好的方法来实现。您希望列溢出网格容器吗？是的，这是正确的。如果有意义的话，我将有一个

溢出：滚动
。问题是我不知道列的数量，因为它是在应用程序中由用户生成的<代码>自动填充
可以处理任意数字，但包装的内容不是我想要的。那么，为什么要使用CSS网格呢？这很好，但是@Michael_B回答了我的问题，因为它涉及CSS网格。@Dan猜测这是一个更好的解决方案：）Flexbox比grid有更好的支持，因此，对于IE和其他浏览器，您甚至可能希望将此作为另一种方法的后备方法。CSS网格在覆盖回退方面非常出色，因此这将是一个非常简单的过程