html - 用动画调整大小时重新排序框

Question

我创建了一个 html / css 代码，列出了适合屏幕宽度的 div 数量。当屏幕宽度发生变化并且 div 对齐时，我希望 div 能够平滑移动。

当我尝试进行搜索时，我不知道确切的关键字。

我想创建一个类似于下面网站的动画。 https://www.kia.ca/all-vehicles

这是代码。

.box{
  position: relative;
  border: 5px solid red;
  text-align: center;
}

.item{
  display: inline-block;
  border: 3px solid blue;
  width: 285px;
  height: 215px;
}

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

标签： htmlcss