Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows:
https://i.sstatic.net/KyPTn.png
Currently, I can accomplish this using HTML divs and flexboxes with code similar to:
<div style="display:flex">
<div id="Sidebar">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_A">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_B">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
<div id="Product_C">
<div class="Data_1">...</div>
<div class="Data_2">...</div>
<div class="Data_3">...</div>
<div class="Data_4">...</div>
...
</div>
</div>
If any product feature includes a long string, I want the height of adjacent cells in other products and the sidebar to adjust their heights accordingly.
https://i.sstatic.net/qfhlF.png
I am aware that I can achieve this structure using an HTML table, but it's not ideal for dynamically adding/removing products or making them draggable since tables are primarily row-oriented. I prefer the flexibility to add, remove, drag, filter, and sort products easily, which seems more suitable with divs or flexboxes.
https://i.sstatic.net/WuwuF.png
My queries :
- Is there a way to organize a table first in columns and then in rows?
- How can I ensure all product lines align in height when using divs or flexboxes?
- Any alternative suggestions for structuring such content or utilizing JavaScript to simplify this process?