行が不均一な CSS グリッド (Pinterest スタイル)

Question

3 列複数行のリンク (画像テキスト) グリッドを作成しようとしています。問題は、画像の高さが同じではないため、次のような結果が得られることです。

このような結果を得るために必要な CSS グリッド プロパティを見つけようとしています。

複数のリンクを含む 3 つの div (列ごと) を作成しようとしましたが、応答時の順序が正しくありませんでした。

＃＃＃手伝ってくれますか？どうもありがとう。

Answer 1

親 div に display: flex を入れるとよいと思います 次に、レンダリングする画像の数を各列に追加します

リーリー

これで、画像の高さが異なることを心配する必要がなくなります。