前言

經典的排版設計，最近需要刻瀑布式卡片設計，目前還在調教中...

CSS 樣式

我是用styled-components 撰寫 所以看起來有點不一樣，但是在閱讀上還是OK的

MasonryVertical

整個卡片外部的容器，這邊設定的是響應式的判斷

用@media 去偵測瀏覽器頁面的長寬,2; 當min-width小於特定px就會更換欄位數column-count

MasonryVerticalBrick

這是內部 卡片的包住的欄位，[box-sizing](http://www.wibibi.com/info.php?tid=CSS3_box-sizing_%E5%B1%AC%E6%80%A7)

CSS3 box-sizing 屬性的功能是用來調整區塊的內距與邊框計算方式，預設的 DIV 區塊的邊框最外的寬度，會因為內距 padding 的值以及邊框 border 的粗細而有所影響，常見的情況是設計師調整了 padding 或邊框的粗細，導致整個 DIV 區塊的寬度改變，輕則影響到美觀，重則影響到整個網頁的排版，有了 CSS3 box-sizing 屬性，網頁設計師可以自己控制 DIV 區塊邊框的計算方式，改善寬度跑掉的問題。
用於調整padding設定完的跑版

Card

單純的React-Semantic-Ui Card

因為他預設卡片高度是適應圖片高度，所以本身卡片就提供不等高的效果，只是他卡片的排版要像瀑布流卡片排列的話
要自己刻，排列的程式碼

const MasonryVertical = styled.div`
      column-count: 1; // 一直排
  column-gap: 10px;
  @media screen and (min-width: 850px) {
    column-count: 2;  // 兩欄直排
  }
  @media screen and (min-width: 1070px) {
    column-count: 3;
  }
  @media screen and (min-width: 1100px) {
    column-count: 3;
    column-gap: 10px;
  }
  @media screen and (min-width: 1800px) {
    column-count: 4;
    column-gap: 10px;
  }
`;

const MasonryVerticalBrick = styled.div`
  box-sizing: border-box;
  padding: 10px;
`;

...略

render(){
    return(
        <MasonryVertical>
            <MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick>
            <MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick>
                ...略
            <MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick><MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick>
        
        <MasonryVertical>
    )

}

結尾

網路上有很多做作法，我做的算是很簡陋的，只能先求有再改進了
參考