Html 具有独立水平移动容器的响应正方形网格

我正在尝试制作一个由响应的正方形/容器组成的网格，它覆盖了整个视口，每一行都独立地水平滑动。在横向方向上有4行，一行高25vh，因此它们一起显然覆盖了视口高度的100%。它应该是一个适合触摸屏的界面

下面是一个代码示例：

<div>
  <div className="group-1">
    <Square 1.1 />
    <Square 1.2 />
    <Square 1.3 />
    <Square 1.4 />
    <Square 1.5 />
  </div>
  <div className="group-2">
    <Square 2.1 />
    <Square 2.2 />
    <Square 2.3 />
    <Square 2.4 />
    <Square 2.5 />
  </div>
  <div className="group-3">
    <Square 3.1 />
    <Square 3.2 />
    <Square 3.3 />
    <Square 3.4 />
    <Square 3.5 />
  </div>
  <div className="group-4">
    <Square 4.1 />
    <Square 4.2 />
    <Square 4.3 />
    <Square 4.4 />
    <Square 4.5 />
  </div>

上述解决方案在横向方向上效果很好，默认情况下，屏幕上也有足够多的正方形可见。纵向也有4行，正方形更大，屏幕上的正方形更少（显然）：

这个解决方案并不漂亮，因为当我添加新的方块时，我必须手动操作，并决定将它们添加到哪个组。我试着把一大行正方形分成四行，但我无法让每一行都独立地水平移动

我想做什么

---

我想有4排横向的正方形和5排纵向的正方形。我希望通过水平滑动行来保持此功能。我对CSS很陌生，我不知道如何让它工作。在纯CSS中有什么方法吗？

您可以使用CSS网格来完成类似于您正在寻找的东西。我不认为这正是你想要的具体布局，但如果你玩弄其中的一些规则，你将能够很容易地根据自己的喜好采用它

正文{
填充：1rem；
}
.画廊{
显示：网格；
网格间距：1rem；
网格模板列：重复（2，1fr）；
网格自动行：25vh；
高度：计算（100vh-1rem）；
保证金：0自动；
最大宽度：1200px；
}
@介质和全部（最小宽度：640像素）{
.画廊{
网格模板列：重复（4，1fr）；
}
}
.画廊组{
弹性：10自动；
高度：25vh；
背景：#1A1A；
}

纵向结构是如何定义的？在您的示例代码中，您已经预先确定了在哪一组中使用哪些方块。如何定义/计算纵向模式？或者总有4x5个正方形，只是一个向上移动到前一行的正方形，这是真的吗？（即，编号在示例中没有意义，我对它读得太多了？）它的结构与景观视图的结构相同。这就是问题所在，我建立了四个组，并且必须在各个组之间平均分配正方形。这是一个糟糕的解决方案，但我不知道如何在CSS中以更好的方式实现它。正方形的数组不一定是4x5，这只是一个例子。我想有4行横向和5行纵向-所有行可以从左到右水平扩展。此外，我希望它能够单独水平移动每一个。我不确定@yerme给出的解决方案是否适用于我的情况。

.group*>Square* {
  width: 25vh;
  height: 25vh;
}

@media (hover: none) and (pointer: coarse) {
  .group* {
    overflow-x: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    scroll-snap-type: x mandatory; 
    scrollbar-width: none;
    margin-bottom: 0;
    padding-bottom: 0;
  };
}

.group*::-webkit-scrollbar {
  display: none;
}