css 使用 grid -template-columns - 当列数未知时答案

【问题标题】：css using grid -template-columns - when the number of columns is unknowncss 使用 grid -template-columns - 当列数未知时
【发布时间】：2021-07-09 04:31:34
【问题描述】：

我想动态创建一个 div 部分列 - 数量取决于服务器响应。

我想使用显示：网格；和 grid-template-columns 用于将此 div 部分显示为列。

我无法设置的问题：grid-template-columns，因为直到运行时间我才知道确切的数字。

我想要网格 css 提供的所有功能，当屏幕尺寸缩小时，列向下行...

我有以下代码：

for (let i = 0; i < numberOfWidget; i++) {
            let childElement = document.createElement('div');
            parentElement.appendChild(childElement);

            childElement.classList.add('testWidget');
            childElement.innerHTML = 'hello';

【问题讨论】：

如果服务器响应导致的列数超过了屏幕上的容量怎么办？你想要一个水平滚动条吗？每列的宽度应该是多少？

标签： css css-grid

【解决方案1】：

您可以使用repeat 函数。

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

【讨论】：