CODEWITHSUNDEEP
javascriptjquerycss
Tom
Tom

Reputation: 35

Dynamic Grid Layout with Vertical Stacks

I'm aware that various jquery plugins exist that allow for creating dynamic grid layouts, but I can't seem to utilize any of them to create automatically sorted grids that FILL A SINGLE COLUMN before continuing to the next

What I wish to achieve (blocks numbered):

_____________
|_1_| 3 |_5_|
| 2 |___|_6_|
|___|_4_|_7_|

EDIT TO ADD DETAIL: I wish to stack fill vertically instead of horizontally for content. Most systems would put 2 where I have put 3 in the above example.

EDIT 2: Each of the blocks represented by number can have variable heights (based on contents), and I would like it to assign a column to each number that would get the entire columns height to be approximately equal (or as close as possible) to the other columns

Upvotes: 0

Views: 496

Answers (2)

Mark Simpson
Mark Simpson

Reputation: 2374

I believe isotope can do this using its fitColumn and cellsByColumn layout modes.

See demo: http://isotope.metafizzy.co/demos/layout-modes.html

Upvotes: 2

zamnuts
zamnuts

Reputation: 9592

Bootstrap's CSS Grid System can do this:

<div class="row">
    <div class="col-md-4">
        <p>1</p>
        <p>2</p>
    </div>
    <div class="col-md-4">
        <p>3</p>
        <p>4</p>
    </div>
    <div class="col-md-4">
        <p>5</p>
        <p>6</p>
        <p>7</p>
    </div>
</div>

Note that "rows" may not directly align depending on the arbitrary content length of each <p> in the col-md-4s. Also <p>s aren't required, you can put whatever you want in there.

Upvotes: 0

Related Questions