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

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

グリッドの最大列数の定義

最大値を設定してグリッドを定義することは可能ですかビューポートのサイズが変更されたときに要素を新しい行に分割できるようにしながら、列の数はどうなりますか?デフォルトでは、グリッドでは列を無限に拡張できるため、狭い画面では望ましくないレイアウトになる可能性があります。

最大列数のグリッドを実現する

これに対処するために、CSS グリッドでは次の概念を導入しています。 Grid-template-columns プロパティ内の max()。 max() 関数は 2 つのパラメータを受け入れます。1 つ目は単一列の最大幅を表し、2 つ目は各列が親コンテナ内で応答性を維持することを保証します。

実装

次のことを考慮してください。コード スニペット:

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

ここで、--n は列の最大数を定義します。 minmax() は、各列の最小幅が 200px であることを保証しますが、100%/var(--n) を超えないようにします。この数式は、コンテナの幅が増加しても列の幅が 100%/maximum_number_of_columns を超えないことを保証し、追加の列の作成を防ぎます。

この手法により、さまざまな画面に適応するレスポンシブ デザインのグリッドを作成できます。指定された最大列数を維持しながらサイズを変更します。

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