Un patrón flexbox en bucle que usa CSS :nth-child() para dar a una Collection List de Webflow un diseño editorial y a medida, con el código y un cloneable gratis.
¿Conoces esa sensación cuando tu Collection List de Webflow se ve... bien, pero también como si la hubiera construido un bot? Puede que suene un poco brutal. Pero las Collection Lists de Webflow se ven como Collection Lists: un ítem es igual que otro. Puedes cambiar cosas, puedes usar formato condicional para ocultar algo o mostrarlo. Pero normalmente es algún tipo de cuadrícula o lista, y el diseño se repite. Sí, a nosotros también nos pasa. Tarjetas uniformes, anchos idénticos, como una hoja de Excel que intenta ser un sitio web.
¿Y si pudieras salir de la monotonía sin necesitar 15 combo classes ni duplicar Collection Lists? Te presento al héroe de esta historia: el selector :nth-child(). Si buscaste cómo funciona nth child css y acabaste aquí, estás en el lugar correcto, y también funciona en Webflow.
Y hoy no solo lo vamos a usar, lo vamos a poner en bucle, y no como ese músico callejero del paseo marítimo... Lo cual, por supuesto, es una gran mentira: lo vamos a poner en bucle exactamente como ese músico callejero del paseo marítimo, y además te damos un práctico cloneable al final para que todo esto sea más fácil.
¿Qué es un nth-child?
Bueno, el octavo hijo de un octavo hijo sería un mago al cuadrado, pero dejando eso a un lado, este proyecto usa un potente selector de CSS llamado :nth-child() para romper el diseño predeterminado y de molde de una Collection List de Webflow. Normalmente, cada ítem del CMS recibe el mismo estilo (aburrido). Pero :nth-child() te permite apuntar a los ítems según su posición en la lista. Por ejemplo, :nth-child(3) selecciona el 3.er ítem, :nth-child(2n) toma todos los pares y :nth-child(6n+1) apunta a cada 6.º ítem + 1 (el 1.º, el 7.º, el 13.º, etc.). Lo usamos para crear un patrón en bucle de anchos de diseño: ancho completo, mitad y mitad, un tercio y dos tercios, y vuelta a empezar. Funciona con cualquier cantidad de ítems del CMS y hace que tu cuadrícula parezca fruto de horas de curaduría… aunque todo esté automatizado con código.
Patrones comunes de :nth-child() y qué hacen
:nth-child(3)
Apunta solo al 3.º hijo.
Caso de uso: Dar estilo a una única tarjeta destacada o sobrescribir manualmente un ítem del diseño.
:nth-child(odd)
Apunta a todos los hijos impares: el 1.º, el 3.º, el 5.º, etc.
Caso de uso: Fondos a rayas tipo cebra, relleno o márgenes alternados.
:nth-child(even)
Apunta a todos los hijos pares: el 2.º, el 4.º, el 6.º, etc.
Caso de uso: Combinarlo con odd para alternar estilos entre ítems adyacentes.
:nth-child(3n)
Apunta a cada 3.er ítem: el 3.º, el 6.º, el 9.º, etc.
Caso de uso: Añadir espacio después de cada tercera tarjeta de una fila o destacar cada tercera publicación de una cuadrícula.
:nth-child(3n+1)
Apunta a cada 3.er ítem empezando por el 1.º: el 1.º, el 4.º, el 7.º, etc.
Caso de uso: Iniciar desde el principio un patrón de diseño repetitivo de 3 ítems.
:nth-child(3n+2)
Apunta a cada 3.er ítem empezando por el 2.º: el 2.º, el 5.º, el 8.º, etc.
Caso de uso: Funciona junto con 3n+1 y 3n+3 para construir bucles de diseño de 3 tarjetas.
:nth-child(-n+3)
Apunta solo a los 3 primeros ítems: el 1.º, el 2.º y el 3.º.
Caso de uso: Dar un estilo VIP a los primeros ítems de una cuadrícula del CMS (como las publicaciones destacadas).
:nth-child(n+6)
Apunta al 6.º ítem y a todos los que le siguen: el 6.º, el 7.º, el 8.º…
Caso de uso: Aplicar un estilo de respaldo o el diseño por defecto una vez que tu sección hero termina de lucirse.
:nth-child(6n+1)
Apunta a cada 6.º ítem + 1: el 1.º, el 7.º, el 13.º, el 19.º, etc.
Caso de uso: Iniciar un patrón de diseño repetitivo de 6 ítems, perfecto para una cuadrícula editorial modular.
:last-child
Apunta al último hijo, sin importar cuántos ítems haya.
Caso de uso: Dar estilo al rezagado solitario del final para que no quede en una posición incómoda (al nuestro le dimos ancho completo).
Conoce Flex Loop Pattern 6
Este picante diseño en CSS usa el poder de Flexbox y :nth-child() para crear un patrón de diseño repetitivo de 6 ítems que se siente a medida, editorial y lleno de ritmo. Está pensado para copiar y pegar en tu cuadrícula del CMS de Webflow.
Qué hace:
- Ítem 1: ancho completo
- Ítem 2: 50%
- Ítem 3: 50%
- Ítem 4: 33,33%
- Ítem 5: 66,66%
- Ítem 6: sin regla propia (el bucle vuelve a empezar en el Ítem 7, que recibe el tratamiento del Ítem 1)
Aquí tienes el código completo, con comentarios:
<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>Por qué funciona este patrón
Los diseños basados en el CMS pueden ser complicados porque todos los ítems comparten la misma clase. Eso significa que no puedes entrar al Designer de Webflow y ponerte a dar estilo distinto al 3.º o al 9.º ítem. (Si quieres dar estilo por separado al texto dentro de esos ítems, tenemos un tutorial sobre cómo crear text spans en elementos de texto dinámicos del CMS en Webflow.) Pero :nth-child() te da un control muy preciso sobre el estilo según la posición.
Combinado con flex-wrap, flex-basis y un poco de matemáticas, puedes lograr una cuadrícula que parece curada aunque esté 100% impulsada por el CMS.
Y como el patrón se repite cada 6 ítems, funciona sin problemas con listas largas. Tengas 6, 60 o 600 Collection Items, seguirán dándose estilo solos como profesionales. Y si te fijas, tenemos las imágenes configuradas en cover y los hijos del contenedor estirándose.
Extra: otros usos de :nth-child()
La magia no termina en las cuadrículas. :nth-child() es básicamente un mando a distancia universal para dar estilo según el orden.
Aquí van otros usos geniales:
Resaltar cada 3.er ítem:
.grid .child:nth-child(3n) {
background-color: #f9f9f9;
}Útil para el efecto cebra, fondos escalonados o simplemente para romper el ritmo.
Dar un estilo distinto a los primeros n ítems:
.grid .child:nth-child(-n+3) {
border: 2px solid red;
}Esto da a los tres primeros ítems un trato VIP. Piensa en publicaciones destacadas o tarjetas hero.
Apuntar a un número concreto:
.grid .child:nth-child(9) {
transform: rotate(2deg);
}¿Por qué? Porque quizá tu 9.ª entrada de blog sea caótica neutral.
Patrones como este te permiten simular el aspecto artesanal, incluso cuando el contenido está totalmente automatizado a través del CMS. Mantiene tu diseño fresco sin que el Designer se convierta en una pesadilla de nombres de clases. Si te gustan los trucos de CMS que hacen que un sitio se sienta a medida, echa un vistazo a nuestras publicaciones sobre degradados de fondo impulsados por el CMS en Webflow, videos de fondo impulsados por el CMS con el Custom Element y un marquee y cinta de ticker nativos de Webflow impulsados por el CMS.
¿Y lo mejor? Puedes pegarlo en la sección de código personalizado del <head> o del <body> de tu proyecto y alejarte como un dios del diseño, o usar un code embed y ver los estilos dentro del Designer.
Pruébalo. Rompe la cuadrícula. Deja boquiabierto a tu cliente.
O simplemente asiente en silencio, porque sabes que tu Collection Item número 27 tiene que ocupar el ancho completo.
Consigue el cloneable aquí.
Más plantillas gratuitas como esta están en nuestra página de cloneables de Webflow.
Preguntas frecuentes
¿Qué selecciona :nth-child(6n+1) en CSS?
Selecciona cada 6.º ítem empezando por el primero: el 1.º, el 7.º, el 13.º, el 19.º y así sucesivamente. La n cuenta desde 0, así que 6n+1 da 1, 7, 13 y siguientes, lo que lo convierte en un buen punto de partida para un diseño repetitivo de 6 ítems.
¿Cómo se usa nth-child con una Collection List de Webflow?
Añade CSS personalizado que apunte a la clase de tu Collection Item, con :nth-child() después, en un embed o en tu código personalizado. Todos los ítems del CMS comparten una sola clase, así que no puedes dar estilo distinto al 3.º o al 9.º ítem en el Designer, pero los selectores basados en la posición sí pueden.
¿Cómo se seleccionan solo los tres primeros ítems de una lista?
Usa :nth-child(-n+3). Coincide con el 1.º, el 2.º y el 3.er hijo, lo que resulta útil para publicaciones destacadas o tarjetas hero en la parte superior de una cuadrícula del CMS.
¿Un patrón nth-child repetitivo funciona con cualquier cantidad de ítems del CMS?
Sí. Como el patrón se repite cada 6 ítems, funciona con 6, 60 o 600 Collection Items. Si la última fila termina con un ítem solitario, :last-child te permite darle ancho completo.
