私は、ユーザーがサムネイルの幅、サムネイルの高さ、マージン (サムネイル間の) を設定できる Image-Gallery-Widget に取り組んでおり、ウィジェットはすべての画像サムネイルを、各画像が同じ幅と高さを持つ素敵なグリッドに表示します。
コードで行と列を定義する必要がなく、ブレークポイント/メディアクエリを必要とせずに、css-flexbox または css-grid がこれを可能にするかどうか疑問に思っています。
サムネイル画像はアンカーでラップされているため、ギャラリー アイテム (またはグリッド アイテム) は次のようになります。
<a href="#" class="gallery-item">
<img src="myimage" width="300" height="200" />
</a>
ギャラリー アイテムはコンテナ div を完全に埋める必要があります。つまり、行の最後のサムネイルとコンテナ div の右端の間にギャップがあってはなりません (行を埋めるのに十分なアイテムがない場合、つまり 3 つのアイテムがある場合を除く)。フィートが連続しているが、アイテムが 8 つしかない場合、3 番目の行にはアイテムが 2 つしかなく、右側にアイテム 1 つ分の隙間があります)。
ギャラリー アイテムは、サムネイルの品質を低下させたくないため、ユーザーが設定したサムネイル幅よりも広くすることはできません。この例では、幅を 300px とします。ギャラリー アイテム間の余白は固定され、ユーザーによって設定されます。行を埋めるのに十分なアイテムが残っていない場合は、単純に左揃えにします。つまり、次のようにします。
CSS でブレークポイントを定義したり、行/列の構造に html を追加したりしたくありません。コンテナに収まるだけの数のギャラリー アイテムをブラウザに並べて配置するだけで済みます。右側にギャップがある場合 (つまり、3 つのサムネイル * 幅 300 ピクセル = 900 ピクセル、ただしコンテナーの幅は 1000 ピクセル)、ブラウザーはグリッド アイテムを縮小して、もう 1 つのギャラリー アイテムが収まるようにし、ギャップをなくす必要があります。各ギャラリー アイテムの周囲に余白を定義できるようにする必要があります。
次の gif で、目的の応答動作 (ブラウザーの幅を変更した場合) を確認できます。
gif に表示されているものはフレックスボックスなしで行われますが、フレックスボックスで回避したいと思っていた大量の CSS が必要です。私はフレックスボックスについてかなり調べましたが、まだ完全に理解できていません。
ヒントをありがとう！