Grille CSS : comment définir un nombre maximal de colonnes sans requêtes multimédias ?

Grille CSS : Définir un nombre maximum de colonnes sans requêtes multimédias

Question :

Pouvons-nous spécifier une grille CSS avec un nombre maximum de colonnes, tout en permettant aux éléments de s'enrouler dynamiquement sur de nouvelles lignes en fonction de la largeur de l'écran changements ?

Réponse :

Oui, en utilisant CSS Grid, nous pouvons y parvenir sans utiliser de JavaScript ou de requêtes multimédias. Cette approche utilise le concept de colonnes à ajustement automatique :

Solution :

1. Créez un conteneur de grille avec la propriété display:grid.
2. Définissez la propriété grid-template-columns à l'aide de la fonction repeat() avec ajustement automatique comme type de répétition.
3. Dans ajustement automatique, utilisez minmax(max(width, 100%/N), 1fr) pour spécifier le comportement de la colonne.

Explication :

• max(width, 100%/N) garantit que la largeur de la colonne sera soit la largeur maximale, soit une fraction (100%/N) du conteneur width.
• 1fr définit la largeur de colonne par défaut sur 1 fraction de l'espace restant.

Par conséquent, lorsque la largeur du conteneur est augmentée, les colonnes s'agrandissent pour s'adapter à la espace disponible dans le nombre maximum de colonnes défini. Les éléments seront automatiquement renvoyés vers de nouvelles lignes si nécessaire.

Extrait de code :

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

Exemple :

Dans le Dans l'exemple suivant, un conteneur de grille est créé avec un maximum de 4 colonnes et les éléments sont renvoyés à la ligne en conséquence :

<div>

Avec cette approche, nous pouvons définir un nombre maximum de colonnes dans une grille CSS, permettant aux éléments de s'enrouler sur de nouvelles lignes à mesure que la largeur de l'écran change, sans avoir besoin de requêtes multimédias.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!