Simple grid
Metro UI CSS includes a responsive fluid grid system that appropriately scales up to 12 columns. It includes predefined classes for easy layout options.
Default grid
1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12
Offset for default grid
offset11
offset10
offset9
offset8
offset7
offset6
offset5
offset4
offset3
offset2
offset1
no offset
Condensed grid
1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12
Offset for condensed grid
offset11
offset10
offset9
offset8
offset7
offset6
offset5
offset4
offset3
offset2
offset1
no offset
Introduction
Grid systems are used to create page layouts through a series of rows and columns that house your content. Here's how the grid system works:
- Rows must be placed within a .grid container
- Use rows to create horizontal groups of columns (container with class .row).
- Content should be placed within columns (container with class .cell).
- Default row contain one cell
- To define cells count use builtin classes .cells2 ... .cells12 for row.
- To create grid without cell margin, add class .condensed to grid main container
- Cells can extended and take the place of multiple cells using the classes .colspan2 ... .colspan12
HTML
<div class="grid">
<div class="row cellsN">
<div class="cell"></div>
...
<div class="cell"></div>
</div>
</div>
Grid with one cell in row
<div class="grid">
<div class="row">
<div class="cell"></div>
</div>
</div>
Grid with four cells in a row
<div class="grid">
<div class="row cells4">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
Grid with two cells in a row and one cell extended over three size
<div class="grid">
<div class="row cells4">
<div class="cell"></div>
<div class="cell colspan3"></div>
</div>
</div>