Comment réaliser un habillage de grille CSS sans requêtes multimédias en utilisant le remplissage ou l'ajustement automatique ?

Utilisation du remplissage automatique ou de l'ajustement automatique de la grille CSS pour l'habillage sans requêtes multimédias

Dans la grille CSS, l'habillage automatique sans requêtes multimédias est réalisable en utilisant les mots-clés auto-fill ou auto-fit dans la notation repeat() dans les colonnes de modèle de grille ou grid-template-rows.

Auto-fill

Le mot-clé auto-fill définit le nombre de cellules de la grille pour remplir l'espace disponible du conteneur. Il ajustera automatiquement le nombre de colonnes pour s'adapter à la taille du conteneur sans déborder.

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

Dans cet exemple, la propriété grid-template-columns spécifie que la grille doit automatiquement remplir sa largeur avec autant de 186 pixels de large. colonnes autant que possible.

Ajustement automatique

Le mot clé d'ajustement automatique se comporte de la même manière que remplissage automatique, mais il ajuste la taille des colonnes pour l'adapter à l'espace disponible au lieu du nombre de colonnes.

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

Dans cet exemple, la propriété grid-template-columns spécifie que la grille doit automatiquement insérer autant de colonnes que possible dans l'espace disponible, chaque colonne ayant une largeur minimale de 186 px et une largeur maximale automatique.

Ces techniques vous permettent de créer une grille CSS qui enveloppe son contenu sans avoir besoin de requêtes multimédias, en s'adaptant dynamiquement à l'espace disponible.

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!