javascript - 动画高度和宽度变化到砌体网格布局。 CSS 网格替代品？

Question

我正在构建一个“砌体”式布局，其中所有框的高度和宽度基本相同，但我想通过增加宽度和高度来突出显示一些框。

我想定期更改突出显示的框(有些可能会缩小到原始大小，有些可能会变大)。

我已经使用 CSS 网格构建了上面的布局，并通过使用 JavaScript 切换 top 和 highlighted 类，我可以实现我想要的:

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(auto-fill, 5.5%);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.container .box {
  border: 1px solid black;

  overflow: hidden;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
}

.container .box.top {
  grid-row: span 2;
  grid-column: span 2;
}

.container .box.highlighted {
  grid-row: span 3;
  grid-column: span 4;
}

<div class="container">
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box highlighted"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
</div>

我想在切换 top 或 highlighted 类时设置动画过渡，但我不知道该怎么做？

使用 CSS 网格是否可行(根据我在网上找到的资料，我不这么认为)？

如果没有，我可以用其他技术实现这种布局/效果吗？

注意:这不需要跨浏览器(只需谷歌浏览器)，我可以使用 JavaScript 来帮助 - 它不需要是纯 CSS

Answer 1

对于任何感兴趣的人，我设法使用 enter link description here 为我当前的布局设置了动画。 .