Javascript 如何在溢出多个网格行时进行单滚动

我编写了一些HTML/CSS代码，这些代码一行跨越四个图书图像，当屏幕响应时，溢出将自动启用。挑战在于如何使一次只滚动一行，但当它溢出时，其他行会一直滚动。 下面是我的代码片段

.book分区网格{
显示：网格；
网格模板列：重复（4，1fr）；
栅柱间隙：3rem；
网格行间距：5.5雷姆；
宽度：90%；
保证金：自动；
溢出：自动；
}
.book截面网格>div img{
宽度：100%；
}

摄影师的问题解决者
通过
摄影师的问题解决者
通过
摄影师的问题解决者
通过
摄影师的问题解决者
通过
摄影师的问题解决者
通过
摄影师的问题解决者
通过
摄影师的问题解决者
通过
摄影师的问题解决者
通过

既然您提到了角度，您可以在数组中使用数组。这样，您就可以控制并拥有任意数量的水平可滚动div。由于您将按行工作，因此最好使用flexbox而不是网格。但我会在代码中忽略这一点

stackblitz

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  data = [ ['Photographer #1', 'Photographer #2', 'Photographer #3', 'Photographer #4'], ['Photographer #5', 'Photographer #6']];
}

.book-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 5.5rem;
  width: 90%;
  margin: auto;
  overflow: auto;
}

.book-section-grid>div img {
  width: 100%;
}

app.component.html

<div class="book-section-grid" *ngFor='let array of data;'>
  <div *ngFor='let item of array'>
    <img src="https://via.placeholder.com/220x312/b3d7ff/FFFFFF/?text=Book-A" alt="">
    <h4>{{item}}</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>
</div>

---

如果创建2个容器div（.book section grid），则可以执行此操作。你想要水平滚动的原因是什么？我想了一下，但是我要用Angular ngFor动态地将数据生成到标记中，但是首先，它必须在这里排列，我的动态不会一直在上面创建div。你的问题很混乱，你说你的目标是只有一行，但是“不是所有的行都在溢出时滚动。”你说“所有的行”是什么意思？你刚才说你只想要一行。我刚刚编辑了这个问题，我想现在应该更清楚了