我有一个简单的任务:给定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行。