CSS Grid - 具有自动宽度的自动列答案

【问题标题】：CSS Grid - Auto columns with auto widthCSS Grid - 具有自动宽度的自动列
【发布时间】：2021-02-20 19:25:54
【问题描述】：

我试图通过使用自动填充来自动换行，问题是我希望列的宽度不是内容的最大宽度

我正在尝试，但它不起作用：

 grid-template-columns: repeat(auto-fit,min-content);

有什么方法可以将列设置为内容大小，同时还具有自动调整属性？

【问题讨论】：

不，这在 CSS 网格中是不可能的。这是一个 flexbox 工作
是的，我也是这么想的……可惜=我必须使用百分比来指定列数而不是模板列。干杯
只是其他的尝试（不是测试，只是大声思考）grid-template-columns 怎么样：repeat(auto-fit,minmax(min-content, 1fr));

【解决方案1】：

试试：

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

【讨论】：

【解决方案2】：

试试 fit-content() 函数：

.container{
    display: grid;  
    grid-template-columns: auto fit-content(800px) auto;
}

fit-content() CSS 函数根据公式 min(maximum size, max(minimum size, argument)) 将给定尺寸限制为可用尺寸。

【讨论】：