Comment réaliser un habillage de grille en CSS sans requêtes multimédias ?

Grid Wrapping avec CSS et remplissage automatique

Réaliser un habillage de grille en CSS sans recourir aux requêtes multimédias est possible grâce à l'utilisation de l'auto- remplissez la notation repeat(). L'extrait de code dans la question d'origine montre une grille avec des largeurs de colonnes explicites, mais pour permettre aux éléments de définir leurs propres largeurs, nous pouvons le modifier comme suit :

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

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

Remplissage automatique

Le remplissage automatique, tel que défini dans la spécification CSS Grid Layout, garantit que le nombre de répétitions dans la notation repeat() est la plus grande valeur possible sans que la grille ne déborde de son conteneur. Cela permet à la grille d'ajuster dynamiquement le nombre de colonnes en fonction de la largeur de ses éléments.

Dans notre cas, nous spécifions le remplissage automatique comme numéro de répétition et le contenu min comme taille fixe pour chaque colonne. Min-content garantit que chaque colonne est dimensionnée pour s'adapter à son contenu, permettant aux éléments de déterminer leur propre largeur.

Le résultat est une grille qui enveloppera ses éléments sans avoir besoin de requêtes multimédias, les espaçant efficacement même avec un nombre d'éléments non déterministe.

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!