How to arrange a custom grid for CMS
I am building a blog page for my client and i have structure where it needs to show 3 featured blogs, please check the image for reference. but in the grid structure, the left side card is vertical directional style card and right side part of cards are horizontal directional cards and those should be 2 cards on the right side, so in total there are 3 featured blogs in should be shown in that section. But i am unable to acheive that.
Can any one of you gus can help me?
Thank You in advance
Bhaskar Thota
6 Replies
Hi Bhaskar π What part of this are you having trouble achieving?
If this is a cms blog, which I think it might be, and you're just having trouble styling the elements to be different even though they're from collection lists, you can use some custom styling with nth elements.
Check out this page with some descriptions on how you can do that π
https://www.w3schools.com/csSref/sel_nth-child.php#:~:text=Definition%20and%20Usage,name)%2C%20of%20its%20parent.
Hey! The way Pat mentioned with the nth element would be the best way. You could also do it natively if you find it easier, but it's scrappy.
1) Set up the containing grid (2x2)
2) Add 2 CMS collections, the first one that takes up the first column, and the second taking up the second column.
3) In the CMS settings for the left one, look under
Limit Items, and set Show: 1 and Start At: 1.
4) For the one on the right hand side, set Show: 2 and Start At: 2.
5) And ofc style the large item and small items as you needThat's awesome, it worked..I have used these as limit items and show items a lot of times, but I don't know why it did not get into my mind yesterday, it was so frustrating..thanks a lot man, you saved me a lot of time
No worries, anytime!
Awesome solution @Chinmay !! π