Comment limiter le nombre maximum de colonnes dans la grille CSS sans requêtes multimédias ?

Grille CSS : spécification d'un nombre maximum de colonnes sans requêtes multimédias

La grille CSS fournit une approche puissante pour la mise en page des éléments Web, mais vous devrez parfois spécifier un maximum nombre de colonnes dans votre 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 sans requêtes multimédias ni JavaScript, pensez à utiliser ce qui suit Règle CSS :

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

Ici, N représente le nombre maximum de colonnes auquel vous souhaitez limiter votre grille.

La partie max(width, 100%/N) garantit que chaque colonne aura une largeur minimale égale à la largeur du conteneur ou à 100 %/N (la valeur la plus élevée étant retenue). Cette configuration limite efficacement le nombre de colonnes à N tout en permettant aux éléments d'être renvoyés dans de nouvelles lignes lorsque cela est nécessaire.

Par exemple :

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

Ce CSS créera une grille avec un maximum de 4 colonnes, chaque colonne ayant une largeur minimale de 200 px ou 25 % de la largeur du conteneur.

Vous pouvez ajuster la valeur --n pour modifier la valeur maximale nombre de colonnes selon les besoins.

Cette solution offre une approche flexible et personnalisable pour créer des grilles avec un nombre limité de colonnes tout en conservant la réactivité sur différentes tailles d'écran.

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!