我有一个社交图标列表，该列表应与display: grid属性一起显示，以便可以在具有grid-column-gap属性的项目之间添加间距。
可以动态更改列表中可以显示的项目数，因此，为了指定模板列，我必须使用类似grid-template-columns: repeat(auto-fit, 30px)的方法-这里出现了我注意到的问题...
如果我将repeat(auto-fit, 30px)用于display: flex容器内的社交容器-网格将无法工作，
但是如果我使用repeat(3, 30px)-网格将起作用。
有人想过如何在flex父容器内使网格与repeat(auto-fit, 30px)一起工作吗？
这是我的jsfiddle-https://jsfiddle.net/CreativeDreams/hvtmyz5d/2/