Hi everybody!
I’m facing the following problem:
My client has a complex product structure with different categories, subcategories, etc. and there will be different ways how the products are presented.
To keep it simple and to keep a balance in the overview of the products, I want to make kind of a grid with the main attributes showing (product name, category and preview img). I want to make a button under it to collapse or unfold and then present a detailed view of the product.
The grid-view elements are nearly squared, but when unfolded the appearing element should fill a whole line of grid elements under it, like this:
Unfolded:
I tried to solve this in different ways, but was not able to create it as I imagined in the designing process. I thought the dropdown item might be the best solution, but no matter what I try, as soon as the element opens, the grid element gets the same width as the dropdown item.
The second problem that comes with this solution is that e.g. when I try to open item 2, it opens directly under the dropdown (which of course is what it should be regulary), but not filling out the next “row” under it.
I also tried it with tabs, but no success.
I’m not bound to tabs or dropdowns, it should just work like in the design. (of course it should also be responsive too)
Do you guys maybe have a solution for me?
Thank you very much in advance and sorry for my possibly wrong English (not my native language). 
Cheers,
sobi
Here is my site Read-Only: https://preview.webflow.com/preview/cms-grid-8bf9be?utm_medium=preview_link&utm_source=designer&utm_content=cms-grid-8bf9be&preview=027cfe51418ca1ccb499ec49f6c3f711&workflow=preview