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

Forcer les éléments de la dernière ligne de la grille à remplir l'espace

Pour répartir les éléments uniformément dans la dernière ligne d'une grille CSS, quel que soit leur nombre d'éléments, envisagez l'approche suivante :

Le défi réside dans la détermination du nombre d'éléments dans la grille pour manipuler leur disposition. Comme cela n'est peut-être pas connu à l'avance, CSS fournit une solution en utilisant les sélecteurs nth-child et nth-last-of-type. Voici comment cela fonctionne :

1. Identifier les éléments de la dernière ligne : utilisez nth-last-of-type pour sélectionner les éléments de la dernière ligne. Par exemple, grille > *:nth-last-of-type(1) ciblera tous les éléments de la dernière ligne.
2. Distribuer les éléments de l'extrémité gauche : pour centrer l'élément le plus à gauche, utilisez justification-self : center . Pour le deuxième élément, utilisez justification-self: end pour l'aligner à droite. Ces styles peuvent être appliqués à un élément sur trois (par exemple, grille > *:nth-child(3n-1) et grille > *:nth-child(3n-2)).
3. Ajuster la durée du dernier élément : pour les derniers éléments de la ligne, nous voulons qu'ils couvrent tout l'espace restant. Utilisez grid-column: span 2 ou grid-column: span 3 pour y parvenir, en fonction du nombre de colonnes dans la grille (par exemple, pour une grille à trois colonnes, ce serait grille > *:nth-child(3n -1):nth-last-of-type(1) { grid-column: span 2; }).

En combinant ces techniques, vous peut garantir que tous les éléments de la dernière ligne de votre grille consomment l'espace disponible de manière égale, quel que soit leur nombre.

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!