In my current project, I am working on creating a view of items that are mapped using React. The main objective is to set up a 3-column layout with items arranged vertically within each column. Each item panel contains a hidden div element which expands when the panel is clicked. This expansion should only affect content in that specific column.
I have experimented with different layouts such as grid and am currently exploring Bootstrap with traditional row and col flex properties utilizing percentages.
To simplify things, I have created two examples, both using jQuery to simulate the click functionality.
First example with grid: https://jsfiddle.net/lharby/vmaut95L/
Basic CSS:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 2em 2em;
grid-auto-flow: column;
}
The problem with this approach is that clicking on an item with hidden content (panel 3) causes all panels to expand to the same size.
Here is the Bootstrap version: https://jsfiddle.net/lharby/u83L6tph/
While better, changing the flex direction to column results in all items appearing in a single left-aligned column with a width of 33% (col-md-4). This can be observed in the provided fiddle using standard Bootstrap CSS.
The markup structure remains similar but includes more Bootstrap utility classes:
<div class="row exclusive-offers-wrapper">
<div class="col-md-4 mx-n1 p-4">
<div class="item">
</div>
</div>
...
The ultimate goal is to achieve a layout similar to the following: https://i.sstatic.net/Ay3HJ.png