Comment répartir également les éléments dans la dernière ligne d'une grille CSS ?

Grille CSS : répartition égale des éléments de la dernière ligne

Dans nos efforts de conception de sites Web, il est souvent nécessaire de répartir uniformément les éléments dans une grille. disposition, en particulier dans la dernière rangée. Cette tâche est facilement accomplie grâce à la puissance combinée des règles du nième enfant et du nième dernier de type. Cependant, une condition préalable à cette méthode est de connaître le nombre de colonnes dans votre grille.

Considérez le balisage suivant :

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

Et les règles CSS qui l'accompagnent :

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

Dans cet exemple, une grille est définie avec trois colonnes, et nous spécifions la distribution et le style des éléments dans la dernière ligne en utilisant nth-child et nième-dernier du type. Les bordures sont ajoutées pour démontrer l'effet visuel.

Les règles CSS appliquées à nth-child(3n-1):nth-last-of-type(1) ou nth-child(3n-2) : nth-last-of-type(1) garantit que les derniers éléments des deuxième et troisième colonnes s'étendront respectivement sur deux ou trois colonnes et consommeront esthétiquement l'espace restant dans la ligne.

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!