Comment définir un nombre maximum de colonnes dans une grille CSS sans requêtes multimédias ?

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

Dans la grille CSS, vous pouvez spécifier un nombre maximum de colonnes pour une grille tout en permettant aux éléments de s'enrouler sur de nouvelles lignes à mesure que la largeur de l’écran change. Pour y parvenir, pensez à utiliser la fonction max(width, 100%/N), où N représente le nombre maximum de colonnes.

La fonction max garantit que si la largeur du conteneur augmente, 100%/N sera toujours être supérieure à la largeur. Cela garantit qu'il n'y aura jamais plus de N éléments par ligne.

Voici un exemple :

.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 */
}

Dans cet exemple, le nombre maximum de colonnes est fixé à 4 à l'aide de -- n propriété personnalisée. La propriété grid-template-columns utilise le remplissage automatique pour créer des colonnes et applique la fonction max pour garantir le nombre maximum de colonnes spécifié.

Vous pouvez ajuster la valeur --n pour modifier le nombre maximum de colonnes selon vos besoins. . Cela fournit une solution générique à vos besoins sans recourir à JavaScript ou aux 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!