Grille CSS : Comment limiter le nombre maximum de colonnes de manière réactive ?

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

Question :

Est-il possible de définir une grille CSS avec un nombre maximum de colonnes tout en permettant aux éléments de s'enrouler automatiquement sur de nouvelles lignes en fonction de la largeur de l'écran ? changements ?

Solution :

En utilisant CSS Grid, vous pouvez limiter le nombre de colonnes via la répétition(auto-fill, minmax(max(width, 100%/ N), 1fr)) syntaxe. Ici, N représente le nombre maximum de colonnes souhaité. À mesure que la largeur du conteneur de grille augmente, la partie 100 %/N du calcul garantit que la largeur par colonne ne dépasse jamais cette limite.

Exemple :

Considérez l'extrait de code suivant :

.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;
}

Dans cet exemple, la propriété personnalisée --n est définie sur 4, définissant un maximum de 4 colonnes. À mesure que la largeur du conteneur change, les éléments seront automatiquement placés sur de nouvelles lignes tout en conservant la limite de colonnes spécifiée.

Cette solution fournit une disposition de grille flexible et réactive sans recourir aux requêtes multimédias ou à JavaScript.

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!