如何使用HTML/CSS像网络一样呈现图库？

我正在一个网站上工作，我需要在下面做这样的演示！ 那么，我该如何用html、css或其他简单的方法来实现这一点呢

---

谢谢

第一个示例更简单，使用CSS网格系统，然后在框上使用伪元素添加它们之间的连接线，如

<div class="row">
  <div class="box connect-down">box 1</div>
  <div class="box connect-left">box 2</div>
  <div class="box connect-up">box 3</div>
  <div class="box connect-right">box 4</div>
</div>

方框1
方框2
方框3
方框4

第二个例子要困难得多，我建议使用绝对定位将项目放置在特定位置，或者使用变换旋转将连接线分开放置

<div class="box" style="position:absolute;top:40px;left:30px;">box 1</div>
<div class="connector" style="width:2px;background:grey;height:200px;transform:rotate(40deg)"></div>

框1

---

有许多缩略图像库，下载和改编可能更好。

与使用引导网格系统的其他库相比，实现第一个演示将更容易。然而，第二个也可以用css实现。但它需要更多的css来进行响应性设计

嗯。。。像什么？什么逻辑？目前我可以告诉你：

.gallery{background:url（'/path/to/question image.png'）no repeat center}

如果你为此编写了代码，但无法开始工作，那么你来对地方了。只需将您的代码（或相关部分）添加到问题中，因为如果没有代码，我们将无法提供帮助。请看嗨，谢谢你的关注，我没有输入任何代码，仍然不知道如何开始应用这个，所以这是我的问题的正确位置吗？第一个：CSS网格布局在1年内。两者：在SVG中，我猜你的意思是，我需要使用带有illustrator的SVG来创建它吗？