css 网格布局自动调整列和行

Question

我正在创建一个包含动态内容的网格。我想像这样调整列。如果列高小于则将两列、三列放在一列中。如果列高大于则放一列。

我希望 column3 位于 coulmn2 之下，column4 位于 column3 位置，所以一切都根据内容进行调整

{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

Answer 1

然后创建 Masonry Masonry Layout