如何让CSS Grid实现类似flex-wrap的自动换行且无需固定最小尺寸？

你可以通过将minmax()的最小值替换为内容相关的尺寸关键字来实现，无需硬写固定像素值，具体方案如下：

方案一：Grid布局+min-content #

把原代码中minmax(50px, 1fr)的50px换成min-content，就能让网格根据元素内容的最小宽度自动触发换行：

* {
  box-sizing: border-box;
}

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  gap: 5px;
}

span {
  padding: 10px;
  border: 1px solid black;
}

原理说明 #

min-content会取元素内容的最小宽度（比如文本中最长单词的宽度），当容器空间不足以容纳所有元素的最小宽度之和时，网格就会自动换行，同时在空间充足时让元素均分剩余宽度，完美替代固定最小尺寸的作用。

为什么minmax(auto, 1fr)无效？ #

在Grid规范中，minmax()的最小值位置使用auto时，会被解析为0（轨道的最小默认尺寸），相当于minmax(0, 1fr)，这种情况下所有元素会尽可能挤在一行，不会触发换行，所以写法无效。

方案二：Flex布局（更贴近flex-wrap原生逻辑） #

如果更追求flex-wrap的灵活度，直接用flex布局也能实现相同效果：

* {
  box-sizing: border-box;
}

div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

span {
  flex: 1 0 min-content;
  padding: 10px;
  border: 1px solid black;
}

原理说明 #

flex: 1 0 min-content表示：元素会尽可能占据可用空间（flex-grow:1），不会缩小到小于内容最小宽度（flex-basis:min-content），空间不足时自动换行（flex-wrap:wrap），完全匹配你想要的flex-wrap式布局效果。

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