Un motif flexbox en boucle qui s'appuie sur :nth-child() pour donner à une Collection List Webflow une mise en page éditoriale, façon sur mesure, avec le code et un cloneable gratuit.
Vous connaissez cette impression quand votre Collection List Webflow a l'air... correcte, mais aussi d'avoir été conçue par un bot ? C'est peut-être un peu brutal. Mais les Collection Lists Webflow ressemblent à des Collection Lists : un élément est identique à un autre. On peut changer des choses, utiliser la mise en forme conditionnelle pour masquer ou afficher un élément. Mais en général, c'est une grille ou une liste, et la mise en page se répète. Oui, nous aussi. Des cartes uniformes, des largeurs identiques, comme un tableur Excel qui essaie de passer pour un site web.
Et si vous pouviez sortir de cette monotonie sans avoir besoin de 15 combo classes ni de dupliquer vos Collection Lists ? Voici le héros de cette histoire : le sélecteur :nth-child(). Si vous avez cherché comment fonctionne nth child css et que vous avez atterri ici, vous êtes au bon endroit, et ça marche aussi dans Webflow.
Et aujourd'hui, nous ne nous contentons pas de l'utiliser, nous le mettons en boucle, et pas comme ce musicien de rue sur la promenade du front de mer... Ce qui est bien sûr un énorme mensonge : on va le mettre en boucle exactement comme ce musicien de rue, et on vous offre un cloneable bien pratique à la fin pour vous faciliter la vie.
Qu'est-ce qu'un nth-child ?
Eh bien, le huitième enfant d'un huitième enfant serait un sorcier au carré, mais bref : ce projet repose sur un puissant sélecteur CSS appelé :nth-child() pour casser la mise en page standard, taillée au cookie cutter, d'une Collection List Webflow. Normalement, chaque élément du CMS reçoit le même style (ennuyeux). Mais :nth-child() permet de cibler les éléments selon leur position dans la liste. Par exemple, :nth-child(3) sélectionne le 3e élément, :nth-child(2n) attrape tous les éléments pairs, et :nth-child(6n+1) cible un élément sur six, en commençant par le premier (1er, 7e, 13e, etc.). Nous l'utilisons pour créer une boucle de largeurs : pleine largeur, moitié-moitié, un tiers-deux tiers, puis on recommence. Ça fonctionne avec n'importe quel nombre d'éléments CMS et donne à votre grille l'air d'avoir été peaufinée pendant des heures… alors que tout est automatisé par le code.
Les motifs :nth-child() courants et ce qu'ils font
:nth-child(3)
Cible uniquement le 3e enfant.
Cas d'usage : styliser une seule carte mise en avant ou forcer manuellement un élément de la mise en page.
:nth-child(odd)
Cible tous les enfants de rang impair : 1er, 3e, 5e, etc.
Cas d'usage : arrière-plans en zébrures, marges ou espacements alternés.
:nth-child(even)
Cible tous les enfants de rang pair : 2e, 4e, 6e, etc.
Cas d'usage : à associer à odd pour alterner les styles entre éléments voisins.
:nth-child(3n)
Cible un élément sur trois : 3e, 6e, 9e, etc.
Cas d'usage : ajouter de l'espace après chaque troisième carte d'une rangée ou mettre en valeur un article sur trois dans une grille.
:nth-child(3n+1)
Cible un élément sur trois en partant du 1er : 1er, 4e, 7e, etc.
Cas d'usage : démarrer dès le début un motif de mise en page répété sur 3 éléments.
:nth-child(3n+2)
Cible un élément sur trois en partant du 2e : 2e, 5e, 8e, etc.
Cas d'usage : fonctionne avec 3n+1 et 3n+3 pour construire des boucles de mise en page à 3 cartes.
:nth-child(-n+3)
Cible uniquement les 3 premiers éléments : 1er, 2e et 3e.
Cas d'usage : offrir un style VIP aux premiers éléments d'une grille CMS (comme les articles à la une).
:nth-child(n+6)
Cible le 6e élément et tous ceux qui suivent : 6e, 7e, 8e…
Cas d'usage : appliquer un style de repli ou la mise en page par défaut une fois que votre section hero a fini de se faire valoir.
:nth-child(6n+1)
Cible un élément sur six en partant du 1er : 1er, 7e, 13e, 19e, etc.
Cas d'usage : démarrer un motif de mise en page répété sur 6 éléments, idéal pour une grille éditoriale modulaire.
:last-child
Cible le dernier enfant, quel que soit le nombre d'éléments.
Cas d'usage : styliser le solitaire de la fin pour qu'il ne reste pas isolé dans son coin (le nôtre prend toute la largeur).
Découvrez Flex Loop Pattern 6
Cette petite mise en page CSS épicée s'appuie sur la puissance de Flexbox et de :nth-child() pour créer un motif répété sur 6 éléments, qui donne une impression sur mesure, éditoriale et pleine de rythme. Il est conçu pour être copié-collé dans votre grille CMS Webflow.
Ce qu'il fait :
- Élément 1 : pleine largeur
- Élément 2 : 50 %
- Élément 3 : 50 %
- Élément 4 : 33,33 %
- Élément 5 : 66,66 %
- Élément 6 : pas de règle propre (la boucle repart à l'élément 7, qui reçoit le traitement de l'élément 1)
Voici le code complet, avec ses commentaires :
<style>
/* ===============================
Flex Loop Pattern 6
===============================
A 6-item repeating layout pattern:
1. Full-width
2. Half-width
3. Half-width
4. One-third width
5. Two-thirds width
6. (Repeats from 1)
*/
/* 1. Every 6th + 1 item (1st, 7th, 13th, etc.) spans full width */
.grid .child:nth-child(6n + 1) {
flex-basis: 100%;
}
/* 2 & 3. Next two items take up 50% each (side by side) */
.grid .child:nth-child(6n + 2),
.grid .child:nth-child(6n + 3) {
flex-basis: 50%;
}
/* 4. Fourth item in the pattern takes one-third width */
.grid .child:nth-child(6n + 4) {
flex-basis: 33.33%;
}
/* 5. Fifth item takes two-thirds width, pairing with the one-third */
.grid .child:nth-child(6n + 5) {
flex-basis: 66.66%;
}
/* ===============================
Default Flex Behaviour Reset
===============================
Prevent children from shrinking or growing unexpectedly.
All sizing comes from flex-basis.
*/
.grid .child {
flex-shrink: 0;
flex-grow: 0;
}
/* ===============================
Straggler Safety Net
===============================
If there's a lonely item at the end (e.g. 25th in a set of 25),
make it full width so it doesn't sit awkwardly beside empty space.
*/
.grid .child:last-child {
flex-basis: 100%;
}
</style>Pourquoi ce motif fonctionne
Les mises en page pilotées par le CMS peuvent être délicates, car chaque élément partage la même classe. Impossible donc d'aller dans le Designer de Webflow et de styliser différemment le 3e ou le 9e élément. (Si vous voulez styliser individuellement le texte à l'intérieur de ces éléments, nous avons un tutoriel sur la création de text spans dans les éléments de texte CMS dynamiques de Webflow.) Mais :nth-child() vous donne un contrôle chirurgical sur le style selon la position.
Combiné à flex-wrap, flex-basis et à un peu de maths, il permet de construire une grille qui semble soignée même quand elle est 100 % pilotée par le CMS.
Et comme le motif se répète tous les 6 éléments, il fonctionne sans accroc sur les longues listes. Que vous ayez 6, 60 ou 600 Collection Items, ils continueront à se styliser tout seuls comme des pros. Et si vous allez jeter un œil, nous avons réglé les images sur cover et fait s'étirer les enfants du wrapper.
Bonus : d'autres usages de :nth-child()
La magie ne s'arrête pas aux grilles. :nth-child() est en gros une télécommande universelle pour styliser selon l'ordre.
Voici quelques autres pépites :
Mettre en valeur un élément sur trois :
.grid .child:nth-child(3n) {
background-color: #f9f9f9;
}Utile pour les zébrures, les arrière-plans décalés, ou simplement pour casser le rythme.
Styliser différemment les n premiers éléments :
.grid .child:nth-child(-n+3) {
border: 2px solid red;
}Les trois premiers éléments reçoivent ainsi un traitement VIP. Pensez aux articles à la une ou aux cartes hero.
Cibler un numéro précis :
.grid .child:nth-child(9) {
transform: rotate(2deg);
}Pourquoi ? Parce que votre 9e article de blog est peut-être un chaotique neutre.
Des motifs comme celui-ci permettent de simuler le rendu artisanal, même quand le contenu est entièrement automatisé par le CMS. Votre mise en page garde un air frais sans que le Designer se transforme en cauchemar de nommage de classes. Si vous aimez les astuces CMS qui donnent à un site un côté sur mesure, jetez un œil à nos articles sur les dégradés d'arrière-plan pilotés par le CMS dans Webflow, les vidéos d'arrière-plan pilotées par le CMS avec le Custom Element et un marquee et un bandeau défilant natifs pilotés par le CMS dans Webflow.
Et le meilleur ? Vous pouvez le coller dans la section de code personnalisé <head> ou <body> de votre projet et repartir comme un dieu de la mise en page, ou utiliser un code embed et voir le style directement dans le Designer.
Essayez. Cassez la grille. Bluffez votre client.
Ou hochez simplement la tête en silence, parce que vous savez que votre 27e Collection Item est censé occuper toute la largeur.
Récupérez le cloneable ici.
D'autres templates gratuits comme celui-ci se trouvent sur notre page cloneables Webflow.
Foire aux questions
Que sélectionne :nth-child(6n+1) en CSS ?
Il sélectionne un élément sur six en partant du premier : le 1er, le 7e, le 13e, le 19e, et ainsi de suite. Le n compte à partir de 0, donc 6n+1 donne 1, 7, 13 et la suite, ce qui en fait un bon point de départ pour une mise en page répétée sur 6 éléments.
Comment utiliser nth-child avec une Collection List Webflow ?
Ajoutez du CSS personnalisé qui cible la classe de votre Collection Item, suivie de :nth-child(), dans un embed ou dans votre code personnalisé. Chaque élément CMS partage une seule classe, vous ne pouvez donc pas styliser différemment le 3e ou le 9e élément dans le Designer, mais les sélecteurs basés sur la position le peuvent.
Comment sélectionner uniquement les trois premiers éléments d'une liste ?
Utilisez :nth-child(-n+3). Il correspond aux 1er, 2e et 3e enfants, ce qui est pratique pour les articles à la une ou les cartes hero en haut d'une grille CMS.
Un motif nth-child répété fonctionne-t-il avec n'importe quel nombre d'éléments CMS ?
Oui. Comme le motif se répète tous les 6 éléments, il fonctionne pour 6, 60 ou 600 Collection Items. Si la dernière rangée se retrouve avec un élément solitaire, :last-child permet de lui donner toute la largeur.
