CSS グリッド ラッピングはメディア クエリなしで実現できますか?

自動入力または自動フィットを使用した CSS グリッド ラッピング

メディア クエリに頼らずに CSS グリッド ラッピングを実現できますか?このクエリは、非決定的なアイテムを望ましいラップ動作でグリッドに配置するという要件から生じています。 Flexbox には適切な間隔を確保するという欠点があるため、これはあまり現実的なオプションではありません。

サンプル コード:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

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

自動入力と自動調整

解決策は、どちらかを採用することです。 repeat() 表記の最初のパラメータとして auto-fill または auto-fit を使用します。

auto-fill

auto-fill を繰り返し番号として指定すると、グリッドがグリッド コンテナからオーバーフローしないように、繰り返しの数が調整されます。

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

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