Metro UI CSS 0.15.8.11
<div class="grid">
<div class="row">
<div class="spanN">...</div>
...
<div class="spanN">...</div>
</div>
</div>
Grid have no max width value and fill on 100% parent container. Any cells have spanN class from span1 to span12. Class spanN has margin left 20px and margin bottom 5px.
| N | Cell class | Cell width |
|---|---|---|
| 1 | span1 | 60px |
| 2 | span2 | 140px |
| 3 | span3 | 220px |
| 4 | span4 | 300px |
| 5 | span5 | 380px |
| 6 | span6 | 460px |
| 7 | span7 | 540px |
| 8 | span8 | 620px |
| 9 | span9 | 700px |
| 10 | span10 | 780px |
| 11 | span11 | 860px |
| 12 | span12 | 940px |
Class spanN can be used on any tags for setting width.
You can create grid in grid
<div class="grid">
<div class="row">
<div class="spanN">
<div class="row">
<div class="spanN">
...
</div>
</div>
</div>
</div>
</div>
| N | Cell class | Cell width |
|---|---|---|
| 1 | offset1 | 80px |
| 2 | offset2 | 160px |
| 3 | offset3 | 240px |
| 4 | offset4 | 320px |
| 5 | offset5 | 400px |
| 6 | offset6 | 480px |
| 7 | offset7 | 560px |
| 8 | offset8 | 640px |
| 9 | offset9 | 720px |
| 10 | offset10 | 800px |
| 11 | offset11 | 880px |
| 12 | offset12 | 960px |
Class offsetN can be used on any tags for margin left.