メディアクエリを使用せずにCSSグリッドアイテムをラップする方法?

メディア クエリを使用しない CSS グリッド ラッピング

CSS グリッドの一般的な課題の 1 つは、使用可能なスペースに合わせて項目をラッピングすることです。メディア クエリが望ましくない場合は、代替アプローチを採用する必要があります。

自動入力ソリューション

の使用を検討してください。 repeat() 表記のバリアント。繰り返し数として指定すると、オートフィルは、オーバーフローを引き起こすことなく、使用可能なスペース内に収まる繰り返しの数を自動的に計算します。

次に例を示します:

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

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

オートフィルを使用すると、グリッドは、使用可能な幅に基づいて列数を調整し、項目が適切に折り返されるようにします。これにより、固定列幅を指定する必要がなくなります。
以上がメディアクエリを使用せずにCSSグリッドアイテムをラップする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。