Alternating Grid CMS items
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.
We miss comments too!
Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!
As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.