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

繰り返し回数としてオートフィルを指定すると、グリッドがグリッドコンテナからはみ出さないように繰り返し回数が調整されます。

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

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