Briser la grille des CMS : un modèle de CMS Flexbox qui semble personnalisé (même s'il ne l'est pas)

Vous connaissez cette sensation lorsque votre liste de collections Webflow s'affiche... bien, mais aussi comme si elle aurait pu être créée par un bot ? C'est peut-être un peu brutal. Mais la liste de collections Webflow ressemble à des listes de collections. Un élément est identique à un autre. Vous pouvez modifier des choses, utiliser la mise en forme conditionnelle et désactiver quelque chose ou l'afficher. Mais généralement, il s'agit d'un lien ou d'une liste et la mise en page se répète. Oui, nous aussi. Des cartes uniformes, de largeurs identiques, comme une feuille de calcul Excel qui essaie d'être un site Web.

Et si vous pouviez sortir de la monotonie sans avoir besoin de 15 classes combinées ou de dupliquer des listes de collection ? Entrez le héros de cette histoire, :nième-enfant ().

Et aujourd'hui, nous ne nous contentons pas de l'utiliser, nous en boucle ça, et pas comme ce musicien de rue sur la promenade... Ce qui, bien sûr, est un énorme mensonge. Nous allons le mettre en boucle comme un musicien de rue sur la promenade, et nous vous donnerons un clonable pratique à la fin pour vous faciliter la tâche.

Qu'est-ce qu'un nième enfant ?

Eh bien, un 8e enfant sur un 8e enfant serait un magicien au carré, mais cela mis à part, le projet utilise un puissant sélecteur CSS appelé:nth-child () pour modifier la disposition par défaut et à l'emporte-pièce d'une liste de collections Webflow. Normalement, chaque élément du CMS a le même style, c'est ennuyeux. Mais :nth-child () vous permet de cibler des éléments en fonction de leur position dans la liste. Par exemple, :nth-child (3) sélectionne le troisième élément, :nth-child (2n) en saisit tous les nombres pairs et :nth-child (6n+1) cible tous les 6 éléments + 1 (1er, 7e, 13e, etc.). Nous l'utilisons pour créer un motif en boucle de largeurs de mise en page : pleine largeur, moitié, tiers et deux tiers, puis recommencez. Il fonctionne avec un certain nombre d'éléments du CMS et donne à votre grille l'apparence que vous avez passée des heures à la gérer... même si tout est automatisé avec du code.

Fréquent : modèles nth-child () et ce qu'ils font

:nième-enfant (3)

👉 Cibles seulement le 3e enfant.

Cas d'utilisation : Donnez un style à une seule carte ou remplacez manuellement un élément de la mise en page.

:nième-enfant (impair)

👉 Cibles tous les numéros impairs enfant : 1er, 3e, 5e, etc.

Cas d'utilisation : Arrière-plans à rayures zébrées, rembourrage ou marges alternés.

:nth-child (même)

👉 Cibles tous les numéros pairs enfant : 2e, 4e, 6e, etc.

Cas d'utilisation : Associez-le à des styles étranges pour alterner entre les articles adjacents.

:nième-enfant (3e)

👉 Cibles tous les 3 article : 3e, 6e, 9e, etc.

Cas d'utilisation : Ajoutez un espacement après chaque troisième carte d'affilée ou surlignez chaque troisième message dans une grille.

:nième-enfant (3n+1)

👉 Cibles tous les 3 articles à partir du 1er: 1er, 4e, 7e, etc.

Cas d'utilisation : Commencez un schéma de mise en page répétitif à 3 éléments depuis le début.

:nième-enfant (3n+2)

👉 Cibles tous les 3 articles à partir du 2: 2e, 5e, 8e, etc.

Cas d'utilisation : Fonctionne avec 3n+1 et 3n+3 pour créer des boucles de mise en page à 3 cartes.

:nième-enfant (-n+3)

👉 Cible les 3 premiers articles uniquement : 1er, 2e et 3e.

Cas d'utilisation : Donnez aux premiers éléments d'une grille CMS un style VIP (comme les articles en vedette).

:nième-enfant (n+6)

👉 Cible les 6ème article et tous les articles qui suivent c'est : 6, 7, 8...

Cas d'utilisation : Appliquez un style de repli ou une mise en page par défaut une fois que votre section héros a fini de s'afficher.

:nième-enfant (6n+1)

👉 Cibles tous les 6 + 1 article: 1er, 7e, 13e, 19e, etc.

Cas d'utilisation : Commencez un schéma de mise en page répétitif à 6 éléments, idéal pour une grille éditoriale modulaire.

:dernier enfant

👉 Cible les dernier enfant, quel que soit le nombre d'articles.

Cas d'utilisation : Coiffez le traîneur solitaire à la fin pour qu'il ne soit pas mal assis (nous avons donné toute la largeur au nôtre).

Découvrez : Flex Loop Pattern 6

Cette petite mise en page CSS épicée utilise la puissance de Flexbox + :nième-enfant () pour créer un modèle de mise en page répétitif à 6 éléments qui semble personnalisé, éditorial et rythmé. Il est conçu pour être copié-collé pour votre grille Webflow CMS.

Ce qu'il fait :

• Article 1 : Pleine largeur
• Article 2 : 50 %
• Article 3 : 50 %
• Élément 4 : 33,33 %
• Élément 5 : 66,66 %
• Point 6 : revient à l'élément 1 et recommence

Voici le code complet, avec des 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 modèle fonctionne

Les mises en page pilotées par le CMS peuvent être délicates car chaque élément appartient à la même classe. Cela signifie que vous ne pouvez pas simplement accéder au concepteur de Webflow et commencer à styliser différemment le troisième ou le neuvième élément. Mais :nième-enfant () vous permet de contrôler la mise au point laser sur le style basé sur la position.

Combiné à flex-wrap, flex-basis et un peu de mathématiques, vous pouvez créer une grille qui regards organisé même lorsqu'il est 100 % piloté par le CMS.

Et comme le schéma se répète tous les 6 éléments, cela fonctionne parfaitement pour les longues listes. Que vous ayez 6, 60 ou 600 articles de collection, ils continueront à se coiffer comme des pros. Et si vous regardez, nous avons les images à couvrir et l'emballage que les enfants étirent.

Bonus : autres utilisations pour :nième-enfant ()

La magie ne s'arrête pas aux grilles. :nième-enfant () est essentiellement une télécommande universelle pour le coiffage sur commande.

Voici quelques autres bangers :

Mettez en surbrillance un élément sur trois :

.grid .child:nth-child(3n) {
  background-color: #f9f9f9;
}

Utile pour les rayures zébrées, les arrière-plans décalés ou simplement pour briser le rythme.

Coiffez le premier n articles différemment :

.grid .child:nth-child(-n+3) {
  border: 2px solid red;
}

Cela donne aux trois premiers articles un traitement VIP. Pensez à des articles en vedette ou à des cartes de héros.

Ciblez un chiffre précis :

.grid .child:nth-child(9) {
  transform: rotate(2deg);
}

Pourquoi ? Parce que peut-être que votre 9e article de blog est chaotique et neutre.

De tels modèles vous permettent de simuler l'apparence artisanale, même lorsque le contenu est entièrement automatisé via le CMS. Il permet à votre mise en page de conserver une apparence moderne sans que le Designer ne se transforme en un cauchemar en matière de dénomination de classe.

Et le meilleur ? Vous pouvez le coller dans votre projet <head> ou <body> section de code personnalisée et repartez comme un dieu de la mise en page, ou utilisez un code intégré et découvrez le style à l'intérieur du concepteur.

Essayez-le. Brisez la grille. Épatez votre client.

Ou faites simplement un signe de tête en silence parce que vous savez que votre 27e article de collection est supposé être en pleine largeur. 😎

Récupérez le clonable ici.