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

Réaliser un habillage de grille CSS sans requêtes multimédias

Dans le domaine de la grille CSS, obtenir un effet d'habillage souhaitable sans recourir à des requêtes média peut être un défi commun. Examinons une solution qui utilise la notation répétition() avec remplissage automatique pour atteindre cet objectif insaisissable.

Réorganisation de l'approche avec répétition(remplissage automatique)

Au lieu de spécifier explicitement la largeur des éléments de la grille via les colonnes du modèle de grille, nous pouvons utiliser la notation repeat() avec le remplissage automatique comme numéro de répétition. Le remplissage automatique calcule dynamiquement le nombre maximum de colonnes pouvant être hébergées dans le conteneur de grille sans débordement.

Clarification du remplissage automatique

La variante de remplissage automatique de la répétition () détermine le nombre de répétitions selon le principe suivant : si le conteneur de grille a une taille prédéfinie ou maximale dans l'axe concerné, le nombre de colonnes correspondra à l'entier positif le plus élevé qui n'entraîne pas l'extension de la grille au-delà de son conteneur.

Exemple d'implémentation

Pour démontrer la puissance du remplissage automatique, améliorons l'extrait de code initial :

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

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

Avec cet ajustement, notre les éléments de la grille ajusteront dynamiquement leur largeur pour s'adapter à l'espace disponible, en s'enroulant de manière transparente vers de nouvelles lignes selon les besoins.

Remarque sur la flexibilité de la largeur des éléments

De plus, le remplissage automatique permet pour que les enfants spécifient leurs propres largeurs, éliminant ainsi le besoin de largeurs codées en dur. Cette approche améliore la flexibilité et la réactivité de la disposition de la grille.

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!