問題タブ [css-grid]

いくつかの(中央の 3) 行を最大サイズまで伸ばしたい CSS グリッド レイアウトがあります。おそらく Flexbox と同様のプロパティを探しているのflex-grow: 1ですが、解決策が見つからないようです。

注: これはElectronアプリのみを対象としているため、ブラウザーの互換性は実際には問題になりません。

次の CSS グリッド レイアウトがあります。

次のグリッドを作成します。

どのボックスにもコンテンツが含まれていない場合、グリッドは次のようになります。

私は、ユーザーがサムネイルの幅、サムネイルの高さ、マージン (サムネイル間の) を設定できる Image-Gallery-Widget に取り組んでおり、ウィジェットはすべての画像サムネイルを、各画像が同じ幅と高さを持つ素敵なグリッドに表示します。

コードで行と列を定義する必要がなく、ブレークポイント/メディアクエリを必要とせずに、css-flexbox または css-grid がこれを可能にするかどうか疑問に思っています。

サムネイル画像はアンカーでラップされているため、ギャラリー アイテム (またはグリッド アイテム) は次のようになります。

ギャラリー アイテムはコンテナ div を完全に埋める必要があります。つまり、行の最後のサムネイルとコンテナ div の右端の間にギャップがあってはなりません (行を埋めるのに十分なアイテムがない場合、つまり 3 つのアイテムがある場合を除く)。フィートが連続しているが、アイテムが 8 つしかない場合、3 番目の行にはアイテムが 2 つしかなく、右側にアイテム 1 つ分の隙間があります)。

ギャラリー アイテムは、サムネイルの品質を低下させたくないため、ユーザーが設定したサムネイル幅よりも広くすることはできません。この例では、幅を 300px とします。ギャラリー アイテム間の余白は固定され、ユーザーによって設定されます。行を埋めるのに十分なアイテムが残っていない場合は、単純に左揃えにします。つまり、次のようにします。

CSS でブレークポイントを定義したり、行/列の構造に html を追加したりしたくありません。コンテナに収まるだけの数のギャラリー アイテムをブラウザに並べて配置するだけで済みます。右側にギャップがある場合 (つまり、3 つのサムネイル * 幅 300 ピクセル = 900 ピクセル、ただしコンテナーの幅は 1000 ピクセル)、ブラウザーはグリッド アイテムを縮小して、もう 1 つのギャラリー アイテムが収まるようにし、ギャップをなくす必要があります。各ギャラリー アイテムの周囲に余白を定義できるようにする必要があります。

次の gif で、目的の応答動作 (ブラウザーの幅を変更した場合) を確認できます。

gif に表示されているものはフレックスボックスなしで行われますが、フレックスボックスで回避したいと思っていた大量の CSS が必要です。私はフレックスボックスについてかなり調べましたが、まだ完全に理解できていません。

ヒントをありがとう！

私は混乱しています。CSS のグリッドについて読んでいます。私はマイクロソフトの本を読んでいますが、彼らは次のプロパティを書いています:

しかし、私が YouTube で見たビデオの中で、彼らは次のように書いていました。

どちらが正しいですか？