CSS网格容器收缩到项目大小

我试图使网格容器的宽度不超过其行的宽度，也就是说，容纳尽可能多的列，然后折叠到其子元素的宽度

例如，如果网格项的总量为16，容器的总空间量为45px，并且每个网格项的宽度为10px，那么期望的结果是4×4网格宽的40px（不是45px）

我试图将显示设置为

内联网格

，但这使得

自动填充

只给出一列

.outer{
宽度：280px；/*这会有所不同*/
背景：橙色；
调整大小：两者；
溢出：自动；
高度：300px；
填充：10px；
}
.项目{
背景：绿色；
显示：网格；
网格模板列：重复（自动填充，50px）；
论证内容：结束；
柱间距：10px；
行间距：10px；
}
.项目{
高度：50px；
宽度：50px；
背景：蓝色；
}

---

将其父级视为网格容器，在其中应用相同的规则来限制网格的宽度：

.outer{
宽度：280px；/*这会有所不同*/
背景：橙色；
调整大小：两者；
溢出：自动；
高度：300px；
填充：10px；
/*增加*/
显示：网格；
网格模板列：重复（自动填充，50px）；
论证内容：结束；
柱间距：10px；
/**/
}
.项目{
网格列：1/-1；/*获取所有列*/
背景：绿色；
display:grid；/*您可以在此处使用“inherit”*/
网格模板列：重复（自动填充，50px）；/*您可以在此处使用“继承”*/
列间距：10px；/*您可以在此处使用“继承”*/
行间距：10px；
}
.项目{
高度：50px；
宽度：50px；
背景：蓝色；
}

---

这是不可能的不幸的是，这不是布局的工作方式。你需要媒体查询。