Le CSS Grid Wrapping peut-il être réalisé sans requêtes multimédias ?

Enveloppement de grille CSS à l'aide du remplissage automatique ou de l'ajustement automatique

L'habillage de grille CSS peut-il être réalisé sans recourir à des requêtes multimédias ? Cette requête découle de l'exigence de placer des éléments non déterministes dans une grille avec un comportement de bouclage souhaitable. Les inconvénients de Flexbox pour assurer un espacement approprié en font une option moins viable.

Exemple de code :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

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

remplissage automatique vs ajustement automatique

La solution réside dans l'utilisation de l'un ou l'autre remplissage automatique ou ajustement automatique comme premier paramètre dans la notation répétition().

remplissage automatique

Lorsque vous spécifiez le remplissage automatique comme numéro de répétition, le le nombre de répétitions sera ajusté pour éviter que la grille ne déborde du conteneur de grille.

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

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!