大致效果如图所示：

我自己虽然实现了，但是相当繁琐，所以想请教下各位不知道有没有更好的方案。（ 不需要考虑兼容性，能实现即可 ）

在线 demo :

主要两个问题：
1 格子布局（每行四个，单双数行拐角位置不同 有个非常重要的前提条件是格子数量不固定。有可能是15个也有可能是18个之类的 ——这会导致最后一行格子的方向不同）
2 格子的数字顺序要和图片相同

我现在的实现思路：

1. 格子布局
   除最后一行外全部采用 inline-block ，主要方便布局且不会有对齐问题。最后一行利用 float：right . 不过很明显最后一行的格子和上一行并不能对齐
2. 格子数字
   利用js改变对应位置的格子内的数字（ 5+8N 到 8n+8 之间的格子数字倒过来赋值），然后由于前面将最后一行格子 float:right ，所以对最后一行格子做判断，是的话不改变赋值。

我感觉应该还有另一种思路，即单数行格子全部 float:left ，双数行格子 float:right ，但是这种情况下对齐有问题，一直没解决掉。不知道各位对这种思路的话，有什么想法没？