我正在构建一个“砌体”式布局,其中所有框的高度和宽度基本相同,但我想通过增加宽度和高度来突出显示一些框。
我想定期更改突出显示的框(有些可能会缩小到原始大小,有些可能会变大)。
我已经使用 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
最佳答案
对于任何感兴趣的人,我设法使用 enter link description here 为我当前的布局设置了动画。 .
关于javascript - 动画高度和宽度变化到砌体网格布局。 CSS 网格替代品?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51002470/