CSS网格可变列宽和换行

Question

我有一个简单的任务：给定x个项目，将它们显示在网格中，每列表示内容的宽度。如果列数超过了容器的宽度，请创建一个新行并继续

我设法使列显示和包装，但仅，如果我为列定义了固定宽度

https://stackblitz.com/edit/angular4-dxkvmt

如何使每行上的每个“标签”都适合内容，但是当标签数超过可用的视图空间时又移至新行？

我尝试过

grid-template-columns: repeat(auto-fill,max-content);

这给每个标签一行

grid-template-columns: repeat(auto-fill,minmax(20px,max-content));

将所有列设置为20px ..但它们在调整大小时确实可以正确流动

将感谢一些提示。我对CSS网格不是特别熟练，因此可能忽略了一些简单的事情

Answer 1

您尝试过吗：

grid-template-columns: repeat(auto-fill, min-content);

或

grid-template-columns: repeat(auto-fill, max-content);

不确定这是否是您想要的结果，但这就是我的理解。两者都有相似的结果，里面有2行。