Join the Webstudio community

Updated 4 months ago

Alternating Layouts in Collections

At a glance

The community member is asking how to create alternating layouts in collections, where some items appear on the left and others on the right. The comments suggest using two separate collections, one for the left and one for the right, or using CSS grid or flexbox to achieve the desired layout. The community members discuss various approaches, including using the "Show" property to filter the collection, and adjusting the grid or flex styles. They also discuss an issue with links not preserving scroll position, and a solution is provided to avoid using the "prevent scroll reset" prop. Overall, there is no single, explicitly marked answer, but the community members collaborate to explore different solutions.

Useful resources
Hey, Currently burning the midnight oil for a deadline, Is there not a way to make alternating layouts in collections?
B
c
D
47 comments
What is alternating layouts?
Hey man! So for instance, I want bit of the collection appearing on the left and another appearing on the right
Attachment
Screenshot_2024-10-28_at_1.03.19_am.png
But when I have two different boxes within the collection, it repeats the first item in the array instead of alternating.
Sorry, it's kind of hard to explain
You can render two collections with same data and use "Show" on item instance to check some value
this way you can filter collection for left and for right columns
I think this screenshot shows the issue better
So even though Box1 and Box2 are different items in the collection, its still repeating the first item in the array
You want two Collection instances, not Collection with two children
One for left column and one for right
If I understand you
So like that? It's still giving the same issue
Ok, what do you want to see on the left and what on the right?
So basically similar to this: https://avernahomes.com.au/portfolio/

Having a collection where each item has a different layout repeated
Ok. So you want one collection, display: flex and flex-wrap: wrap on collection parent, each item have 50% width and then somehow adapt layout of each
Or it could be display: grid; grid-template-columns: 1fr 1fr; gap: 50px; on parent
Yeah, got it - I thought it can be done within the editor
You can do all in editor
Advanced panel can be used for grid
Got you! Thanks
We don't have yet a dedicated ui for it though
Each item can be Image component
with object-fit: contain
and object-position: center;
Yeah - Got it working πŸ™‚
Not too sure why the first gaps row - gap is so big though
That's another problem haha
You probably don't want to use grid-template-rows here
Btw you don't need html embed. You can write grid styles in Advanced panel
Attachment
image.png
Ah yeah - it's easier to write out sometimes πŸ™‚
Sorry one more question and then i'll stop bothering you - sometimes with links they go to the same position on another page, is there a way to force it to go to the top?
Do you have an example?
Make sure you don't use "prevent scroll reset" prop on links
As you can see our links do not preserve scroll
https://webstudio.is
Hey Sorry Bogdan, Is prevent scroll reset a setting by default?
Strange, I've commented out all my extra code and it's still occuring
Ah, its smooth scroll
[Off-topic] Super smooth website you're building there @ciphr.99 🀩
Thank you! @Davor - The base is all finalised now, now its time for the fun part to animate πŸ™‚
Add a reply
Sign up and join the conversation on Discord