CMS list items in hierarchical order

Hi there,

Is there any way to display CMS items (cards) in hierarchical order? I have 10 CMS items in a collection list, and I want them to be displayed as, 1 item in the first row, 2 in the second and so on up to 4th row . Please let me know if there’s any way to achieve this. Thanks in advance!

Hi Krithika,

You can achieve this with a collection list, with the middle collection list element set to a grid layout of 12 columns, plus custom CSS.

Here I’ve assigned a class of grid-container to that middle element for the item-colspan CSS.

.grid-container > div:nth-child(1) {
  grid-column: span 12;
.grid-container > div:nth-child(2),
.grid-container > div:nth-child(3) {
  grid-column: span 6;
.grid-container > div:nth-child(4),
.grid-container > div:nth-child(5),
.grid-container > div:nth-child(6) {
  grid-column: span 4;
.grid-container > div:nth-child(n+7) {
  grid-column: span 3;

1 Like

Thanks a lot for the solution Michael. It worked!