Need help with CMS collections templates. apple newsroom style

trying to recreate something similar, and when i use grids, it applies to everything so it never works. Can anyone help me out?

Source: Newsroom - Apple (CA)

hi @Bogdan_Patynski when you inspect their site you can see that they use for this layout flex and each element have classes added to create desired design.

Hey stan, how do i add classes for each nth item, because as soon as i add a class it applies to all of them - it’s for the collection list

hi @Bogdan_Patynski this is one of problems (at least for me) that Webflow does not have option to add classes to individual list items as in code editor.

As you have found

  1. we can only design collection item but not collection list (except grid or flex)
  2. items do not follow CSS Grid areas but only CSS Grid columns
  3. collection doesn’t offer to place custom HTML into collection list to create custom structure for items
  4. there is no option to open in designer WF page in some of kind of code editor to be able edit HTML

The good news is that there are ways how to do that. First is with javascript, this method is more efficient as it only require one request to database. In this case we can create array from CMS items and then add if conditions based on array items index.

Second option is easier for no-coders. In this case we will create this design by adding 3 collections and use WF filters and conditions. First for one item (full with) to show only one item starting at 1-st, second for four items (two columns) show four items starting at 2-nd and finally third (three columns) to show six items start at 5-th. This way we will get this design but for unnecessary high price of 3 requests to CMS.

Hope that this overview “how to” will give you an idea how to achieve your design. :wink:

1 Like

hi @Bogdan_Patynski if you don’t have further question related to your topic feel free to close this request by checking any response as solution.