Styling Collection Crosswise in a Grid

At a glance

The community member is looking for a solution to style a grid with 2 columns in a crosswise manner, i.e., items 2, 3, 6, 7, 10, 11, etc. Another community member requests a visual example to better understand the request. The discussion suggests that this is for a CMS collection item that should be scalable. A potential solution is proposed, where the items are sorted by column from top to bottom, and then every odd-numbered item in the grid is targeted to adjust the size. However, the community member notes that this solution may result in a weird order for the user.

GGromek

Hi, I am looking for a solution for styling collection.
I have a grid with 2 columns. I would like to style them crosswise. i.e. 2, 3, 6, 7, 10, 11 etc. do you think this is possible?

5 comments

SSofian Bettayeb

do you have a visual example, I don’t understand the serie of number?

GGromek

SSofian Bettayeb

Hmmm, And I guess it’s for a CMS collection item and it should be able to scale right?

GGromek

yes

SSofian Bettayeb

I might have a solution, but the order of the items will look weird for the user. Since you don’t seems to have dates, I will try this one.
You sort the item by column from top to botttom like the second picture I shared. (image 1 and 2)
Then, you just need to target every odd number of the grid to adjust the size. This is a custom selector specific to grid (image 3)
If needed, you can see how I did it for a client here

Add a reply

Community forum for knowledge and support

Styling Collection Crosswise in a Grid