CSS Grid布局元素不足单行时被拉伸如何解决

该异常是CSS Grid布局的默认渲染逻辑导致的：
你给父容器设置的grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))中，auto-fit会自动折叠没有放置元素的空列轨道，把剩余可用空间全部分配给现有元素的列宽，最终触发子元素（图片、卡片）拉伸。当元素数量足够填满首行时，没有多余空列可以折叠，布局就会恢复正常。

纯CSS修复（优先推荐，无需JS） #

不需要写任何JavaScript，直接修改父容器#parent的Grid配置即可，根据你的布局需求二选一：

• 如果你希望卡片保持固定宽度范围、不被无限拉伸：

#parent {
    display: grid;
    /* 替换auto-fit为auto-fill，同时给卡片设置固定最大宽度（可按需调整数值） */
    grid-template-columns: repeat(auto-fill, minmax(250px, 300px));
    /* 对齐方式可选：flex-start为左对齐留空，center为整体居中 */
    justify-content: flex-start;
    grid-column-gap: 1rem;
    grid-row-gap: 2rem;
    overflow: auto;
}

• 如果你希望卡片保留弹性增长能力，但不会在元素过少时过度拉伸：
  给卡片类新增最大宽度限制即可，不需要修改Grid配置：

.card {
    max-width: 300px; /* 按你期望的卡片最大宽度调整 */
    margin: 0 auto; /* 卡片在列内居中，避免偏左 */
}

JS计算适配方案（仅特殊场景使用） #

纯CSS方案已经覆盖绝大多数常规场景，没有额外性能开销。如果你的业务有特殊逻辑（比如需要严格控制单行列数、结合其他动态布局规则），可以通过容器宽度动态计算可容纳元素数量，示例代码如下：

// 计算单行可容纳的最大卡片数
function getColumnCount() {
  const parent = document.getElementById("parent");
  const containerWidth = parent.clientWidth;
  const cardMinWidth = 250; // 和CSS里的minmax最小值保持一致
  const colGap = 16; // 和CSS里的grid-column-gap值保持一致（1rem=16px是默认浏览器值，如果你改了根字号要同步调整）
  return Math.max(1, Math.floor((containerWidth + colGap) / (cardMinWidth + colGap)));
}

// 动态更新Grid列配置
function updateGridLayout() {
  const parent = document.getElementById("parent");
  const colCount = getColumnCount();
  parent.style.gridTemplateColumns = `repeat(${colCount}, minmax(250px, 1fr))`;
}

// 窗口大小变化时触发布局更新
window.addEventListener('resize', updateGridLayout);
// 修改原有setSize方法，每次生成元素后同步更新布局
function setSize(num) {
  empty_parent();
  for(let i = 0; i < num; i++){
    create_elem();
  }
  updateGridLayout();
}

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