自動入力または自動調整を使用してメディア クエリなしで CSS グリッド ラッピングを実現するにはどうすればよいですか?

メディア クエリなしのラッピングに CSS グリッドの自動入力または自動フィットを使用する

CSS グリッドでは、メディア クエリなしの自動ラッピングが実現可能Grid-template-columns 内のrepeat() 表記で auto-fill または auto-fit キーワードを使用するか、 Grid-template-rows.

Auto-fill

auto-fill キーワードは、コンテナーの使用可能なスペースを埋めるグリッド セルの数を定義します。コンテナのサイズに合わせて、オーバーフローすることなく列の数が自動的に調整されます。

この例では、grid-template-columns プロパティにより、グリッドの幅が 186 ピクセルの幅で自動的に埋められるように指定されています。

Auto-fit

auto-fit キーワード自動入力と同様に動作しますが、列の数ではなく利用可能なスペースに合わせて列のサイズが調整されます。

この例では、grid-template-columns プロパティにより、グリッドは、各列の最小幅が 186 ピクセル、最大幅が自動的に設定され、利用可能なスペースにできるだけ多くの列が自動的に収まるようにします。

これらのテクニックを使用すると、メディア クエリを必要とせずにコンテンツをラップし、利用可能なスペースに合わせて動的に調整する CSS グリッド。

以上が自動入力または自動調整を使用してメディア クエリなしで CSS グリッド ラッピングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。