怎样实现css grid自适应行元素数量和行元素高度的布局?

Question

grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

我使用过这种自动填充列数和自动列宽的布局,在容器宽度改变的时候,列的元素数量和宽度会自适应

现在的需求是:
一个div容器,高度为视窗的50%,宽度为视窗的100%, overflow-x 允许滚动
行元素的数量和高度能根据容器高度来自适应,横向超出容器宽度的元素可以向横向滚动
我试过将template-columns改为template-rows,但是不是想要的效果

/** 这样自动高度和自动行数不生效 */
grid-template-rows: repeat(auto-fill, minmax(160px, 1fr)); 

是否能用grid实现这样的布局,如果不能,有没有其他不使用媒体查询的实现方式..

Answer 1

暂时就 flex 布局写了一个，不知道是不是符合你的预期，这边是在线Demo。
看不到多行的话，可以点击链接查看或者点击Demo右上角的 Edit On CodePen 打开。

主要是不清楚 元素的行数 和 高度能够根据容器高度自适应的具体关联是什么，比如说：

• 元素的最小高度固定，高度不满足则折行，然后列内元素等分占据剩余高度。
• 元素的高度不固定，行数固定，列内元素按照行数去占据高度。