如何在网格项目中使用水平滚动容器？

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 200px); /* 定义每个网格项的宽度为200px */
    gap: 20px; /* 定义网格项之间的间距 */
    overflow-x: auto; /* 设置水平滚动 */
  }

  .scroll-container {
    white-space: nowrap; /* 内容不换行 */
  }

  .item {
    display: inline-block; /* 内容水平排列 */
    width: 200px; /* 每个网格项的宽度 */
    height: 200px; /* 每个网格项的高度 */
    background-color: #ccc;
  }
</style>

<div class="grid-container">
  <div class="scroll-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
  </div>
</div>