Streaming live at 10am (PST)

Apply different widths to collection items (like columns)?


#1

Is it possible to apply different widths to different collection items in the same list (like columns), rather than all changing at once?

Thanks!
Alex


#2

Hey @aOne

If you have something unique in the CMS fields, you can use conditional visibility to reveal different “layouts” or “widths” for different collection items. This works well using flexbox.

Alternatively you can use the “limit” option on the cms collection list. Example:

  • collection list A can be limited to 1 item and have a 20% width
  • collection list B can be limited to 1 item and have a 50% width
  • collection list C can be limited to 1 item and have a 30% width
    This would in effect create a row of 3 items of varying widths.

or

Each row could be a collection list using flexbox: stretch. Example:

  • collection list A can be limited to 3 items
  • collection list B can be limited to 5 items
  • collection list C can be limited to 4 items
    This would in effect create rows where the number of items will fill the row and resize accordingly. The more items, the small they will shrink.

Hopefully this will give you some ideas to jump off of. Happy designing!