Maison >interface Web >tutoriel CSS >Comment puis-je faire en sorte que les éléments de la dernière ligne de la grille CSS remplissent l'espace restant ?

Comment puis-je faire en sorte que les éléments de la dernière ligne de la grille CSS remplissent l'espace restant ?

Patricia Arquette
Patricia Arquetteoriginal
2025-01-01 11:24:10471parcourir

How Can I Make CSS Grid's Last Row Items Fill Remaining Space?

Contrôle de l'espacement de la dernière ligne dans la grille CSS

Défi :

Comment pouvons-nous nous assurer que tous les éléments de la dernière ligne d'une grille CSS consomment l'espace restant dans la ligne, quelle que soit leur numéro ?

Solution :

En tirant parti de la puissance de la grille CSS, nous pouvons réaliser ce contrôle spatial grâce à une combinaison intelligente de nième-enfant et nième-dernier-de- règles de type. La clé réside dans la connaissance préalable du nombre de colonnes dans la grille.

Mise en œuvre :

  1. Définissez la grille à l'aide de display:grid et précisez le nombre souhaité de colonnes avec grid-template-columns.
  2. Appliquez la propriété justification-items: start pour aligner les éléments dans le lignes.
  3. Utilisez *:nth-child(3n-1) pour styliser le premier élément de chaque ligne avec des propriétés spécifiques (par exemple, centrer le texte).
  4. Utilisez *:nth-child (3n) pour styliser le deuxième élément de chaque ligne (par exemple, en alignant le texte à droite).
  5. Pour le dernier élément de chaque ligne, combinez *:nth-child(3n-1) avec nth-last-of-type(1) pour obtenir le comportement de répartition souhaité.
  6. Ajoutez des règles supplémentaires pour personnaliser l'apparence de la dernière ligne, telles que la spécification de bordures ou les couleurs d'arrière-plan.

Exemple Code :

.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;
}

Exemple HTML :

<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>

En exploitant la puissance de ces propriétés CSS, nous pouvons contrôler efficacement l'espacement des éléments dans la dernière ligne d'une grille CSS, assurant une mise en page esthétique et flexible.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn