Marketplace
Made in Webflow

Alternating Grid CMS items

1840 views
site profile thumbnail

Description

šŸ‘‰ Notice how the image is on the left in the first row and to the right in the next? That's the topic of this cloneable. For a static layout this would be simple either rearranging the elements inside your grid or reversing the direction. For a CMS collection this is not possible in Webflow without custom code. So here it is, using a hack that's not really intended for this, but it gets the job done. The first line of code forces every second item to go from right to left. The second line forces the text wrapper to always be left to right so our text doesn't get messed up. Browser support is just fine. <style> .w-dyn-item:nth-child(even) { direction: rtl; } .two-column-content { direction: ltr;} </style> -- Stay tuned to more cloneables on https://twitter.com/EmilVillumsen or here on Webflow --
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
gridcmscollectionscollectionalternatecloneablecloneablestwo-column

More by Emil Villumsen

See profile
View details
Webflow Meetup Dashboard
163
614