0

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();
6
  • 1
    Masonry is designed for this: masonry.desandro.com
    – Petah
    Oct 30, 2012 at 23:59
  • jsfiddle.net/xKjUv/7 - gaps, gaps everywhere... I know it is, but I cant avoid them. Oct 31, 2012 at 0:03
  • I moved the 'D' tile to be second in the list and now masonry seems to work fine.
    – sosborn
    Oct 31, 2012 at 0:15
  • in that case yup. but it has to work in every. Oct 31, 2012 at 0:27
  • 2
    Well, it isn't going to be possible to get what you need unless you are more flexible with the sorting.
    – sosborn
    Oct 31, 2012 at 1:03

2 Answers 2

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.