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.

<style>
.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;
}
</style>

https://preview.webflow.com/preview/x-grid?utm_medium=preview_link&utm_source=designer&utm_content=x-grid&preview=767d1134aa4785759da50b1ebaeea56e&workflow=preview

1 Like

Thanks a lot for the solution Michael. It worked!