Crosswise Styling Solutions for a Two-Column Grid Layout

·Jun 05, 2024 12:08 PM

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

· Sorted by Oldest

Sofian B.
·
do you have a visual example, I don’t understand the serie of number?
Gromek
·
Sofian B.
·
Hmmm, And I guess it’s for a CMS collection item and it should be able to scale right?
Gromek
·
yes
Sofian B.
·
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

Sofian B.
·
do you have a visual example, I don’t understand the serie of number?
Gromek
·
Sofian B.
·
Hmmm, And I guess it’s for a CMS collection item and it should be able to scale right?
Gromek
·
yes
Sofian B.
·
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