创建瀑布流布局
要创建最常用的瀑布流布局，需要将列设置为网格轴，将行设置为瀑布流轴，通过 grid-template-columns 和 grid-template-rows 属性进行定义。此时容器的子元素会像常规网格布局的自动排列那样，逐行依次布局。
当元素换行时，会遵循瀑布流算法进行排列。元素将被加载到剩余空间最多的列中，最终形成一个紧密排列的布局，而不会存在固定的行轨道。
* {
box-sizing: border-box;
}
body {
font: 1.2em sans-serif;
}
.grid {
padding: 10px;
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.item {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
color: #d9480f;
}
css.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
}
html
js// prettier-ignore
const itemSizes = [
"2em", "3em", "1.6em", "4em", "3.2em",
"3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].style.blockSize = itemSizes[i];
}
也可以创建按行加载元素的瀑布流布局。
js// prettier-ignore
const itemSizes = [
"2em", "3em", "1.6em", "4em", "2.2em",
"3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].style.inlineSize = itemSizes[i];
}
css.grid {
display: grid;
gap: 10px;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 100px);
}