I know that this may be a frequent question but I didn't have any luck finding an answer.
I need to build a 3 column responsive layout for a grid containing an unknown number of variable-sized elements. Their size are limited to a maximum of 3x3 in the grid.
My problem here is that I need to be able to stack 1-row items, but every plugin that I tried ends up filling my rows before columns.
For example, here's a solution using gridstack.js:
<div class="grid-stack grid-stack-3">
<div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: red;">1</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: green;">2</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: green;">3</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: red;">4</div>
</div>
</div>
var options = {
cell_height: 267,
vertical_margin: 26,
width: 3
};
$('.grid-stack').gridstack(options);
As you can see in the image, the green elements are not stacked as they should.
To have them stacked, I need to swap divs 3 and 4, leading to this (which is the expected layout).
Unfortunately, the items are received from an external service, so I can't control their order (and it would be pointless as I can't know which the expected layout will be).
I had a little luck with Isotope's fitColumn mode, meaning that it fixes the example in the pictures, but adding a fifth element creates a fourth column and I'm forced to have just 3 of them, so I can't really use it.
Here's the HTML for the test layout that I need to implement (this one's a sample of what I've been asked to do):
<div class="grid-stack grid-stack-3">
<div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: red;">1</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: green;">2</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: red;">4</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: green;">3</div>
</div>
<div class="grid-stack-item" data-gs-width="2" data-gs-height="3" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: blue;">5</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: red;">6</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: green;">7</div>
</div>
<div class="grid-stack-item" data-gs-width="2" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: yellow;">8</div>
</div>
<div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
<div class="grid-stack-item-content" style="background: green;">9</div>
</div>
</div>
Does someone have any idea on a javascript solution that allows me to build such a layout (support for one-column mode is required too!)? I'm running out of options and I'd like to avoid writing a custom solution for this task because I'm not that experienced with javascript.
