So right now i have a collection list and i want it to stack vertically going 1,2,3,4,5,6 down in the right column and 7,8,9,10,11,12 down the left column
Here is my site Read-Only: Webflow - Ascesa
hi @mbailey87the columns you have set will never work, the only way I can think about is to use Grid Areas and javaScript either using index or attributes.
Just in case I have done for you a simple example using index.
Hey @mbailey87, just like @Stan said your columns will never work as they are now. Change the collection to Full Width
Then limit the collection to only show 1-6
Then duplicate the collection and have it show 7-12
then set your neighborhood div to display grid 2 columns 1 row
and that should work, it will look like this
It is a little elaborated but it does the trick. I hope this helps!
If your number of items won’t change often, you can do this entirely in Webflow.
- On your collection list element ( the middle one of the 3 ),
- make it a single column under settings
- make it a grid under styles. Flow downward, 6 rows
- lower, under the typography settings make it RTL
- On your collection item element ( the innermost one of the 3 )
- set the typography to LTR
If you want a video and are ok with this being public let me know, this would make a good addition to my layout techniques lessons.
1 Like
Yeah I have thought to show adding second collection and adjust limits @Pablo_Cortes. While this is simplest way natively create these cols and IMO it is not ideal still it is how it can be used without any custom code.
I have never heard about messing with RTL - LTR to create cols @memetican and it is very strange approach to me. As this is IMO not the way how it should be done I will never use it in production, but if you recommend this method as standard and it works well …
Fully agree, however in fact it seems to be the official CSS way to reverse the auto-layout flow for grids. OP’s requirement to have the ordering reversed ( 1-6 right, 7-12 left ) is unusual to us but it fits RTL cultures, so it’s the appropriate approach.
It’s also nice because it’s pure CSS which means you can apply it in a locale-specific way… a site that’s both French and Arabic could easily switch the column ordering flow just with a small chunk of CSS.
For me, I’d probably use 2 collection lists, or JS, just out of habit. But this is much easier and Webflow-native.
Im aware of these reverses that can be used along use of LTR languages but it is IMO other thing .
1 Like
Agree, when I found that this was the accepted approach my first reaction was “erg…” as well, but I quite like it. I’d still prefer a distinct CSS grid-auto-flow-direction attribute that works like flex-direction, just because I’m OCD about these things.
But it fits… OP’s definitely asking for an RTL flow, and RTL doesn’t necessarily mean RTL languages, which I think is why the W3C hasn’t added the attribute I’d prefer above.
Great advantages to the CSS-only approach though…
If the customer adds more items, we probably want more columns to automatically be created. The CSS approach does that automatically, and designer changes are only needed if too many columns are created and layout revisions are necessary.
Also it’s much neater to make it responsive, e.g. 4 columns on desktop, 3 on tablet, 2 landscape, 1 portrait… trivial with CSS.
RTL as a layout attribute is growing on me. Certainly has its merits.
I know there will be easier way without JS 
here it is with pure CSS only with Grid settings that is IMO better solution than LTR trick.
2 Likes
But how do you reverse the column order without RTL?
It’s possible OP mis-typed but the requirement was 1-6 in the right column and 7-12 in the left. ;) That’s why I took the “weird” approach.
Oh I miss the reverse order 
fixed second example with direction: ltr to Grid
1 Like