CSS實作照片卡片瀑布流布局（兩列）

1.問題：

今天遇到了需要實作一個卡片的瀑布流布局的問題，卡片高度是不同的。

最後使用css3中的column屬性實作了這個布局，而且非常的簡便啊(lz隐約記得上次寫瀑布流的時候是用js實作的…naive啊)

實作效果大概如下圖～

2.實作方法

// 外層DIV
.PhotoWall {
        /*margin-bottom: 60px;*/
        column-gap: 10px; // 卡片間距
        column-count: 2; // 卡片列數
        /*margin: 10px 10px 40px;*/
    }
           

// 照片卡片
.all {
        break-inside: avoid; // 不設定這個，卡片會被攔腰截斷
        margin-bottom: 10px;
        border-style: outset;
        border-color: #DDDDDD;
    }