Comment envelopper des éléments de grille CSS sans requêtes multimédias ?

Enveloppement de grille CSS sans requêtes multimédias

Un défi courant dans la grille CSS consiste à emballer les éléments pour les adapter à l'espace disponible. Dans les cas où les requêtes multimédias ne sont pas souhaitables, des approches alternatives doivent être utilisées.

La solution de remplissage automatique

Envisagez d'utiliser la fonction variante de la notation repeat(). Lorsqu'il est spécifié comme numéro de répétition, le remplissage automatique calcule automatiquement le nombre de répétitions qui tiennent dans l'espace disponible sans provoquer de débordement.

Voici un exemple :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid > * {
  background-color: green;
  height: 200px;
}

Avec le remplissage automatique, la grille ajustera son nombre de colonnes en fonction de la largeur disponible, garantissant ainsi que les éléments s'enroulent bien. Cela élimine le besoin de spécifier des largeurs de colonnes fixes.

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!