设置响应式 css 网格而不向正文添加水平滚动

Question

所以目前我有一个与 CSS 网格相关的问题，我想要做的是显示一个包含 5 个项目的简单网格，如果页面减少，每个项目都会向下跳。我的代码如下：

HTML

  <div class="app-cards">
    <div class="app-card">
      item here
    </div>
  </div>

SCSS

  app-cards {
    display: grid;
    grid-gap: 2.4rem;
    grid-template-columns: repeat(auto-fit, minmax(20.5rem, 1fr));
  }

这很好用，因为项目响应迅速且组织良好，但是当我将页面缩小一点时，会出现溢出-x 滚动条。我知道它出现的原因，是因为我没有计算网格间隙，5 个项目占据 100%，网格间隙只需要多一点，如果我去除间隙，它就完美契合了。

我尝试了一些这样的事情：

app-cards {
  display: grid;
  grid-gap: 2.4rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

但是这样当我减小页面时项目没有响应，有帮助吗？

非常感谢