如何让CSS Grid在图片达max-width时自动增减列？

完全可以实现，核心是使用CSS Grid的auto-fit关键字结合minmax()函数，替代固定列数的设置。

修改思路 #

• 替换固定列数配置：把repeat(3, 1fr)改成repeat(auto-fit, minmax(最小列宽, 最大列宽))
  • auto-fit会根据容器宽度自动计算可容纳的列数，实现动态增减；
  • minmax()定义列宽范围：最大列宽设为元素的max-width（205px），最小列宽设为你能接受的单元格最小宽度（示例用180px，可按需调整）；
  • 可选添加justify-content: center，避免容器宽度超过总列宽时单元格被强制拉伸，保持元素max-width并居中布局。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .pet-grid {
        display: grid;
        /* 核心修改：自动适配列数，列宽范围180px到205px */
        grid-template-columns: repeat(auto-fit, minmax(180px, 205px));
        gap: 10px;
        width: 100vw;
        /* 可选：列数不足时居中，避免拉伸单元格 */
        justify-content: center;
      }

      .pet {
        aspect-ratio: 1/1;
        background-color: cadetblue;
        max-width: 205px;
        /* 让单元格内容占满轨道宽度，同时受max-width限制 */
        width: 100%;
      }
    </style>
  </head>

  <body>
    <header></header>

    <main>
      <div class="pet-grid">
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
      </div>
    </main>

    <footer></footer>
  </body>
</html>

效果说明 #

• 容器宽度足够时，每列自动扩展到205px（元素的max-width），并根据容器宽度自动增加列数；
• 容器缩窄时，列宽先缩小到设置的最小列宽，继续缩窄则自动减少列数；
• 单元格间距始终保持设置的10px，不会出现被拉大的情况。

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