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 行项目。