CSS グリッド: メディア クエリを使用せずに最大列数を設定する方法

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

質問:

要素を新しいものに動的にラップできるようにしながら、最大列数の CSS グリッドを指定できますか?

答え:

はい、CSS グリッドを使用すると、JavaScript やメディア クエリを使用せずにこれを実現できます。このアプローチでは、自動調整列の概念を利用します。

解決策:

1. display:grid プロパティを使用してグリッド コンテナーを作成します。
2. 繰り返しとして自動調整を指定したrepeat()関数を使用して、grid-template-columnsプロパティを設定します。 type.
3. 自動調整内で、minmax(max(width, 100%/N), 1fr) を使用して列の動作を指定します。

説明:

• max(width, 100%/N) により、列幅が次のようになります。最大幅またはコンテナ幅の一部 (100%/N) のいずれかです。
• 1fr は、デフォルトの列幅を残りのスペースの 1 分の 1 に設定します。

その結果、コンテナーの幅が増加すると、定義された最大列数内の使用可能なスペースに合わせて列が拡張されます。要素は必要に応じて自動的に新しい行に折り返されます。

コード スニペット:

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

例:

次の例では、最大 4 列のグリッド コンテナーが作成され、要素が折り返されます。

<div><p>このアプローチを使用すると、CSS グリッド内の最大列数を定義でき、メディア クエリを必要とせずに、画面幅の変化に応じて要素を新しい行に折り返すことができます。</p></div>

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