columnsを設定すると、ギャラリーサイトでよく見るような
高さが可変な横並びレイアウトを作成することができます。

画像だけを並べるなら問題ないんですが、画像以外の要素が一緒に入っている場合
なぜか同じdivに入れていても次の段に回されることがあって微妙に困っていました。

解消できたので備忘録として残しておきます。

htmlを用意

画像と画像に対するタイトルを一つのdivに入れてあります。

colmnsで２列レイアウトに

ただcolmnsを指定するだけで２列レイアウトにできます👏
このような感じ↓

brake-insideを指定して文字と画像が離れないように

上記例だと、タイトルだけが次の段に飛ばされてしまっています。
break-inside: avoid; を付けると同じdiv内の内容は離れ離れにならないようよしなに調整してくれます👏

終わり