Skip to content

网格布局实现瀑布流

html
<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>
```

````less
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 5px;
    grid-auto-flow: dense;
    width: calc(100% + 10px); // 10px是grid-item的margin
    margin-right: - 10px;
    .grid-item {
        grid-row-end: span 62; // 62是(grid-item的高度 + grid-item的margin) / grid-auto-rows, 62是grid-item的高度 + grid-item的margin / grid-auto-rows
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
```

更新时间: