why isn't this grid based?

[brgrz]

The tiles I mean..or are they? If so, to which grid? Certainly not the Twitter Boostrap one - their default is 70px base column width with 30px margins. I understand that kind of margin is too big for Metro but still columns in total with margins should total to some grid, be it 940, 950, 960 or, my personal favorite, 978. Currently they don't total to neither of those. How did you come up with tiles 130x130px?

[shiftkey]

We weren't looking to depend on a specific layout system when we started on it.

We're open to suggestions (and code) on how to make this play nice with the grid-based layouts du-jour.

[brgrz]

All right, I'll create a fork some time this week but for now just a few suggestions:

1. 90px tile with 10px padding (i suggest keeping the padding inside the tile the same as the gutter/right margin) creates 110px wide tile, which is a bit easier too handle since it is not too big. This in fact creates a grid of 8 cols of 950px (if we don't count the last tile's right margin) or 960px (if we do count the last margin in). Or put 5px margins on both sides of a tile but I like margins on one side only (a matter of personal taste). This one should be easy enough to support in Metro CSS.

2. For a custom project, where I don't need even number of columns, I created 110px tiles with 10px padding and 10px right margin, which totals to 980px, so I introduced the .last selector to set the last margin to 8px, which then makes it 978px which is quite a popular GS.

I did quite a lot testing in grid calculator to maybe come up with something even better but it's quite hard to achieve 12 col grid for tiles given the fact that the text inside the tiles has to be somewhat legible.

Hopefully, I will post my explorations as a fork very soon.