Sorting divs like Windows 8 tiles

Question

fiddle - here is example.

I'm trying to do something looking exacly like windows 8 tiles grid. We got 3 types of tile sizes

normal=1x1;
wide=2x1; and
big=2x2.

What my point is is that tiles dont need to be exacly sorted, but there musnt be empty spaces between them.

I've checked Masonry, Isotope, freetile, vGrid, Wookmark and the same problem occurs: empty gaps.

I know that sometimes it may be logically impossible to avoid gaps, but in that case it is possible indeed.

It dont have to be jquery plug-in kind of solution - the only thing I need to get is tiles of different, but fitting to each other sizes and avoid gaps between them when im 'packing' them.

$('article').freetile();

http://jsfiddle.net/xKjUv/7/ - gaps, gaps everywhere... I know it is, but I cant avoid them. — user1785870, Oct 31 '12 at 00:03
I moved the 'D' tile to be second in the list and now masonry seems to work fine. — sosborn, Oct 31 '12 at 00:15
Well, it isn't going to be possible to get what you need unless you are more flexible with the sorting. — sosborn, Oct 31 '12 at 01:03
sounds like a square peg an round hole issue unless you accept some overlap — charlietfl, Oct 31 '12 at 01:30

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

Search on SO for Isotope + gaps and Masonry + gaps. Has been dealt with numerous times. Depending on the order of appearance of your 1x1, 2x1 and 2x2 divs in the DOM, at certain browser widths "gaps" are inevitable, especially if your elements are large.

See https://stackoverflow.com/a/11438705/963514 or https://stackoverflow.com/a/12116760/963514

edited May 23 '17 at 12:27

Community

1
1

answered Oct 31 '12 at 17:06

Systembolaget

2,514
2
21
37

score 0 · Answer 2 · answered Oct 31 '12 at 11:12

0

I've done it. The point is to set columnWidth. If tiles has 150px and margin 10px between them it would be columnWidth:160.

answered Oct 31 '12 at 11:12

user1785870

477
1
6
16

Sorting divs like Windows 8 tiles

2 Answers2