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 ?
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 :
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!