columns を使ってPinterest風のカラムレイアウトの作成

columns を使ってピンタレスト風のカラムレイアウトの作成
このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。

www.pinterest.jp

columns: ;;

break-inside: avoid;

ボックス途中でのカラムの区切り方法を指定する。avoidにすることでボックス途中での改ページ/カラム区切りを避ける事が出来ます。

.box{
break-inside: avoid;
}