我有一个简单的任务:给定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网格不是特别熟练,因此可能忽略了一些简单的事情
答案 0 :(得分:-1)
您尝试过吗:
grid-template-columns: repeat(auto-fill, min-content);
或
grid-template-columns: repeat(auto-fill, max-content);
不确定这是否是您想要的结果,但这就是我的理解。两者都有相似的结果,里面有2行。