React での Pinterest のような動的画像の CSS グリッドの実装

Question

そこで、CSS グリッドを使用して Pinterest のような画像ギャラリーを作成しようとしています。そのため、高さの異なる写真を並べることができ、それぞれの写真が空きスペースを占める可能性があります。しかし、私が見たすべての例では、必要な高さに基づいて各画像に異なるクラスを追加していましたが、私はデータベースから画像を動的に追加したいと考えています。

これをやってみました:

リーリー

私のCSSファイル:

リーリー

しかし、小さな写真は同じ行に、大きな写真は別の行に配置し、それらをランダムにしたいと考えています。

画像ごとに異なるクラスを追加せずにこれを実現する方法はありますか?

Answer 1

Pinterst は垂直配置を使用します。したがって、複製する場合は、隣接する固定幅の垂直ボックスを作成する必要があります。 画面のサイズに合わせて可能な限り多くの行を表示します。 (Pinterest ウィンドウのサイズを変更すると、ページ全体が再生成されますが、それは質問の範囲外だと思います) したがって、div を使用するか、1 行と 1 つの長い列だけを含むテーブルを使用することをお勧めします。

リーリー

もちろん、それは動的です。 (小さい画面用に 3 列の長い行を作成しました) ここから、tr の幅を 200px に、画像の幅を 100% に設定して、各列に画像を追加できます。