9x9-example

9x9-example-02.css

.grid-cell {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap; // 讓內部 div 當空間不夠時可以自動換行
    flex-direction: column; // 讓內部 div 由上往下排列
    justify-content: space-between; // 讓內部的 div 內容可以去均分父元素橫的空間
    align-content: space-around; // 讓內部的 div 內容可以去均分父元素直的空間
    height: 350px; // 要設定固定高度，才會有 wrap 的效果
}