能否实现基于子元素内容宽度的CSS Grid动态自动填充？

当然可以实现，你当前代码的问题在于repeat(auto-fill, minmax(min-content, 1fr))的写法矛盾——auto-fill会强制容器生成尽可能多的列，而1fr又会让列拉伸填满容器宽度，直接违背了“基于子元素内容宽度”的需求。

下面是几种可行的实现方案：

方案1：列宽完全贴合内容，自动换行 #

这种方式下，列宽会刚好容纳子元素内容，容器宽度不足时自动换行：

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  gap: 20px 10px; /* 行间距20px，列间距10px，简化写法 */
`;

方案2：带最小宽度限制的自适应列宽 #

如果希望子元素太窄时列不会挤成一团，可以给列设置最小固定宽度，超过部分随内容自适应：

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  gap: 20px 10px;
`;

方案3：不换行的内容贴合布局 #

如果不需要自动换行，只想让列并排且完全贴合内容，同时容器宽度也贴合总内容宽度，可以用inline-grid：

const Grid = styled.div`
  display: inline-grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: 10px;
`;

另外补充：你代码里的grid-template-rows: repeat(auto-fill, 1fr)是多余的，auto-fill不适合用在行模板配置中，行高可以让网格自动根据内容调整，或者用grid-auto-rows: min-content来让行高精准贴合子元素内容。

内容的提问来源于stack exchange，提问作者me-me