Appearance
网格布局实现瀑布流
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;
}
}
```