メディア クエリを使用せずに CSS グリッドの最大列数を制限するにはどうすればよいですか?

CSS グリッド: メディア クエリを使用しない最大列数の指定

CSS グリッドは、Web 要素をレイアウトするための強力なアプローチを提供しますが、最大列数を指定する必要がある場合があります。グリッド内の列数を調整しながら、画面幅の変化に応じて要素を新しい行に折り返すことができます。

メディアを使用せずにこれを実現するにはクエリまたは JavaScript を使用する場合は、次の CSS ルールの使用を検討してください:

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

ここで、N はグリッドを制限する列の最大数を表します。

The max(width, 100% /N) 部分により、各列の最小幅がコンテナの幅または 100%/N (どちらか大きい方) になることが保証されます。この構成では、列数を効果的に N に制限し、必要に応じて要素を新しい行に折り返せるようにします。

例:

.grid-container {
  --n: 4; /* Set the maximum number of columns to 4 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

この CSS は、最大 4 つのグリッドを作成します。各列の最小幅は 200px またはコンテナの幅の 25% です。

--n 値を調整して変更できます。必要に応じて列の最大数を変更できます。

このソリューションは、さまざまな画面サイズでの応答性を維持しながら、限られた数の列でグリッドを作成する柔軟でカスタマイズ可能なアプローチを提供します。

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