如何用CSS Grid实现列表项最小200px最大250px且换行后尺寸统一？

当然可以用CSS Grid实现这个需求，核心是结合minmax()和min()函数来精准控制列宽：

.list-container {
  display: grid;
  /* 列间距可根据需求自行调整 */
  gap: 1rem;
  /* 关键写法：实现列宽的最小/最大限制与自动适配 */
  grid-template-columns: repeat(auto-fill, minmax(200px, min(250px, 1fr)));
}

.list-item {
  /* 可选：添加自定义样式，不影响核心布局逻辑 */
  padding: 1rem;
  background-color: #f0f0f0;
}

原理说明： #

• repeat(auto-fill, ...)：让Grid容器根据自身宽度自动填充尽可能多的列，当剩余空间无法容纳最小宽度的列时，自动触发换行。
• minmax(200px, min(250px, 1fr))：
  • 先锁定列的最小宽度为200px，确保容器空间不足时的换行逻辑符合预期。
  • 当容器宽度充足时，列会尝试占满可用空间（1fr），但通过min(250px, 1fr)限制了最大宽度为250px——当1fr的计算值超过250px时，自动取250px作为列宽。
• 这套写法能保证所有列表项的宽度始终一致，无论是换行前还是换行后。

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