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

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

CSS グリッドでは、要素を新しい要素に折り返すことを許可しながら、グリッドの最大列数を指定できます。画面幅の変化に応じて行数が変わります。これを実現するには、max(width, 100%/N) 関数の使用を検討してください。N は最大列数を表します。

max 関数により、コンテナの幅が増加しても常に 100%/N になります。幅より大きくする必要があります。これにより、1 行あたり N 個を超える要素が存在することがなくなります。

次に例を示します:

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

.grid-item {
  /* Styling for grid items */
}

この例では、 -- を使用して最大列数が 4 に設定されます。 n カスタム プロパティ。 Grid-template-columns プロパティは、自動入力を使用して列を作成し、max 関数を適用して指定された最大列数を確保します。

必要に応じて、--n 値を調整して最大列数を変更できます。 。これにより、JavaScript やメディア クエリに依存せずに、要件に対する一般的なソリューションが提供されます。

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