CSS columnsの表示順を行優先に変えるMasonryレイアウトの実装

写真ギャラリーのようなレイアウトを作るとき、CSSの columns プロパティはとても便利です。 ただ、使ってみると写真の表示順が「上から下、次の列へ」となり、直感的な「左から右、次の行へ」の順番にならなくて困った経験はないでしょうか。 今回は、行優先の表示順を維持しつつ、高さの異なる要素が隙間なく並ぶMasonryレイアウトをReactで実装する方法を紹介します。 Read more