63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.waterfall {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* grid-gap: 0.25em; */
|
||
grid-auto-flow: row dense;
|
||
grid-auto-rows: 20px;
|
||
|
||
|
||
/* grid-template-columns: repeat(2, 1fr); // 指定两列，自动宽度
|
||
grid-gap: 0.25em; // 横向，纵向间隔
|
||
grid-auto-flow: row dense; // 是否自动补齐空白
|
||
grid-auto-rows: 20px; // base高度，grid-row基于此运算 */
|
||
}
|
||
|
||
.waterfall .item {
|
||
width: 100%;
|
||
background: #222;
|
||
color: white;
|
||
border: 1px solid white;
|
||
}
|
||
|
||
.waterfall .item:nth-of-type(3n+1) {
|
||
/* 1,4,7,10 ... */
|
||
grid-row: auto / span 1;
|
||
}
|
||
.waterfall .item:nth-of-type(3n+2) {
|
||
/* 2,8,11,15 */
|
||
grid-row: auto / span 9;
|
||
}
|
||
|
||
.waterfall .item:nth-of-type(3n+3) {
|
||
/* 3,6,14,15 */
|
||
grid-row: auto / span 4;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="waterfall">
|
||
<div class="item">1</div>
|
||
<div class="item">2</div>
|
||
<div class="item">3</div>
|
||
<div class="item">4</div>
|
||
<div class="item">5</div>
|
||
<div class="item">6</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |