StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p><strong>EDIT</strong></p> <p>Since the time of posting this I have added support of "Gutters" and callbacks</p> </blockquote> <p>I wrote a plugin that does what you're looking for. Not EXACTLY but you could use it to point you in the right direction...</p> <p>Plugin - <a href="https://github.com/DrewDahlman/Mason">https://github.com/DrewDahlman/Mason</a></p> <p>Blog Post about Theory - <a href="http://www.drewdahlman.com/meusLabs/?p=218">http://www.drewdahlman.com/meusLabs/?p=218</a></p> <p>The Idea is this - we know that we have a number of elements - Mason's job is to fill a defined space with these elements which are floated left - this results in "gaps" so we need to detect those gaps and somehow fill them with something. In order to do this we can either copy an already existing element or - we can have a bucket of "filler" elements that we can fill that space.</p> <p>OP - if you're looking for a randomly sized grid with some control this will do the work. I have made this fiddle - <a href="http://jsfiddle.net/bdGVr/">http://jsfiddle.net/bdGVr/</a></p> <p>You'll notice each time you run it or resize the window the grid re-draws. This will result in any gaps being filled in with a red block.</p> <p>Playing with the options of the <code>mason.js</code> you can adjust the ratio which is the size relative to the container, as well as the possible size combos.</p> <p>example - a ratio of 1.8 and a size of 1x3 means 1.8 x 1 = Height, and 1.8 x 3 = Width.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload