メディアクエリを使用せずにCSSでグリッドラッピングを実現するにはどうすればよいですか?

CSS と自動入力によるグリッド ラッピング

メディア クエリに依存せずに CSS でグリッド ラッピングを実現するには、auto-fill を使用します。 repeat() 表記を埋めます。元の質問のコード スニペットは明示的な列幅を持つグリッドを示していますが、項目が独自の幅を定義できるようにするには、次のように変更できます:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, min-content);
}

.grid > * {
  background-color: green;
  height: 200px;
}

Auto-Fill

CSS グリッド レイアウト仕様で定義されている自動入力により、repeat() 表記の繰り返し数が可能な限り最大になることが保証されます。グリッドがそのコンテナをオーバーフローさせずに値を取得できます。これにより、グリッドは項目の幅に基づいて列数を動的に調整できます。

この場合、各列の繰り返し数として auto-fill を指定し、固定サイズとして min-content を指定します。 Min-content により、各列のサイズがコンテンツに合わせて調整され、項目が独自の幅を決定できるようになります。

その結果、メディア クエリを必要とせずに項目をラップし、効果的に適切な間隔で項目を配置するグリッドが作成されます。アイテムの数が非決定的な場合でも。

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