实现 Masonry 布局
效果图
以上是效果图,这里使用 grid 布局来实现。
实现
先放完整代码,接着逐个进行解析。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
height: 300px;
grid-auto-flow: dense;
}
.item {
background: rgba(0, 0, 0, 0.2)...
erio.hashnode.dev1 min read