我有一个简单的任务:给定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网格不是特别熟练,所以可能忽略了一些简单的事情

最佳答案

您是否尝试过:

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


要么

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


不知道这是否是您想要的结果,但这就是我对此的理解。两者都有相似的结果,里面有2行。

09-17 15:23
查看更多