CSS グリッド: 列の最大数をレスポンシブに制限するにはどうすればよいですか?

CSS グリッド: メディア クエリなしで最大列数を維持する

質問:

要素が自動的に折り返されるようにしながら、最大数の列を含む CSS グリッドを定義することは可能ですか?画面幅の変化に応じて新しい行を追加しますか?

解決策:

CSS グリッドを使用すると、repeat(auto-fill, minmax(max) によって列数を制限できます。 (width, 100%/N), 1fr)) 構文。ここで、N は必要な最大列数を表します。グリッド コンテナの幅が増加するにつれて、計算の 100%/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 {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

この例では、 --n カスタム プロパティが 4 に設定され、最大値を定義しています。 4列の。コンテナの幅が変化すると、指定された列制限を維持しながら、アイテムは自動的に新しい行に折り返されます。

このソリューションは、メディア クエリや JavaScript に依存せずに、柔軟で応答性の高いグリッド レイアウトを提供します。

以上がCSS グリッド: 列の最大数をレスポンシブに制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。