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

メディア クエリを使用せずに CSS グリッド ラッピングを実現する

CSS グリッドの領域では、メディア クエリに頼らずに望ましいラッピング効果を実現できます。共通の課題。このとらえどころのない目標を達成するために、オートフィルを備えたrepeat()表記を採用するソリューションを詳しく掘り下げてみましょう。

repeat(auto-fill)によるアプローチの改良

Grid-template-columns を通じてグリッド項目の幅を明示的に指定する代わりに、繰り返し数として自動入力を伴うrepeat() 表記を利用できます。自動入力は、オーバーフローすることなくグリッド コンテナー内に収容できる列の最大数を動的に計算します。

自動入力の明確化

繰り返しの自動入力のバリアント() は、次の原則に基づいて繰り返し数を決定します。グリッド コンテナーの関連する軸に事前定義されたサイズまたは最大サイズがある場合、列の数は、グリッドがコンテナーを超えて拡張されない最大の正の整数と一致します。

サンプル実装

自動入力の機能を実証するために、最初のコード スニペットを強化してみましょう。

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

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

この調整により、グリッド項目は、使用可能なスペースに合わせて幅を動的に調整し、必要に応じて新しい行にシームレスに折り返されます。

項目幅の柔軟性に関する注意

さらに、自動入力により次のことが可能になります。子が独自の幅を指定できるため、幅をハードコーディングする必要がなくなります。このアプローチにより、グリッド レイアウトの柔軟性と応答性が向上します。

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