How would I create a Grid with different styled card components for each array Item?

[nonoumasy]

I'm trying to reproduce what they did here:
https://monocle.com/shop/?page=2

How would you apply different styles to array items?

My thoughts would be:
Use a Grid of 4 columns so that each item will always fit using this constraint.
2. create 2 components (horizontal, vertical)
3. formalize a structure for each row( 1st row will have 2h, 2nd row will have 1v 1h 1v, etc)
4. somehow apply this structure when mapping the items when I render them in react

But I'm not sure how to implement it so that I have different layouts for different rows:

first row = 2 h
second row = 1v 1h 1v
third row = 1h 1v 1v
and so on...

Is there some functional way to compose this so that you can apply a structured layout to when you map these items out?

I started this codesandbox:
https://codesandbox.io/s/cart-using-usecontext-usereducer-c205u

[oliviertassinari]

I'm locking the conversation, please use StackOverflow for support requests.