1
2
3
4
5
6
7
8
9
10
11
12
cell-3
cell-3
cell-3
cell-3
cell-4 + offset-4
cell-3
cell-6 + offset-3
cell-4+ offset-4
1
1
1
1
nested
nested
nested
nested
<metro-grid>     <metro-row>         <metro-column align="Center"><div border="LRTB">1</div></metro-column>         <metro-column align="Center"><div border="LRTB">2</div></metro-column>         <metro-column align="Center"><div border="LRTB">3</div></metro-column>         <metro-column align="Center"><div border="LRTB">4</div></metro-column>         <metro-column align="Center"><div border="LRTB">5</div></metro-column>         <metro-column align="Center"><div border="LRTB">6</div></metro-column>         <metro-column align="Center"><div border="LRTB">7</div></metro-column>         <metro-column align="Center"><div border="LRTB">8</div></metro-column>         <metro-column align="Center"><div border="LRTB">9</div></metro-column>         <metro-column align="Center"><div border="LRTB">10</div></metro-column>         <metro-column align="Center"><div border="LRTB">11</div></metro-column>         <metro-column align="Center"><div border="LRTB">12</div></metro-column>     </metro-row>     <metro-row>         <metro-column size="_3" align="Center"><div border="LRTB">cell-3</div></metro-column>         <metro-column size="_3" align="Center"><div border="LRTB">cell-3</div></metro-column>         <metro-column size="_3" align="Center"><div border="LRTB">cell-3</div></metro-column>         <metro-column size="_3" align="Center"><div border="LRTB">cell-3</div></metro-column>     </metro-row>     <metro-row>         <metro-column size="_4" offset="_4" align="Center"><div border="LRTB">cell-4 + offset-4</div></metro-column>     </metro-row>     <metro-row>         <metro-column size="_3" align="Center"><div border="LRTB">cell-3</div></metro-column>         <metro-column size="_6" offset="_3" align="Center"><div border="LRTB">cell-6 + offset-3</div></metro-column>     </metro-row>     <metro-row>         <metro-column size="_4" offset="_4" align="Center"><div border="LRTB">cell-4+ offset-4</div></metro-column>         <metro-column align="Center"><div border="LRTB">1</div></metro-column>         <metro-column align="Center"><div border="LRTB">1</div></metro-column>         <metro-column align="Center"><div border="LRTB">1</div></metro-column>         <metro-column align="Center"><div border="LRTB">1</div></metro-column>     </metro-row>     <metro-row>         <metro-column>             <metro-row>                 <metro-column align="Center"><div border="LRTB">nested</div></metro-column>                 <metro-column align="Center"><div border="LRTB">nested</div></metro-column>                 <metro-column align="Center"><div border="LRTB">nested</div></metro-column>                 <metro-column align="Center"><div border="LRTB">nested</div></metro-column>             </metro-row>         </metro-column>     </metro-row> </metro-grid>

Media columns

1
2
3
4
5
6
7
8
9
10
11
12
<metro-grid>     <metro-row>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>         <metro-column size-md="_1" align="Center"><div border="LRTB">1</div></metro-column>     </metro-row> </metro-grid>

Gap

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
<metro-grid class="demo-grid">     <metro-row>         <metro-column align="Center"><div border="LRTB" background-color="Green">1</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">2</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green" background-color="Green">3</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">4</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">5</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">6</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">7</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">8</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">9</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">10</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">11</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">12</div></metro-column>     </metro-row> </metro-grid> <metro-grid class="demo-grid" gap="false">     <metro-row >         <metro-column align="Center"><div border="LRTB" background-color="Green">1</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">2</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green" background-color="Green">3</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">4</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">5</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">6</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">7</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">8</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">9</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">10</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Green">11</div></metro-column>         <metro-column align="Center"><div border="LRTB" background-color="Yellow">12</div></metro-column>     </metro-row> </metro-grid>

Stub column

Stub column
1
<metro-grid>     <metro-row>         <metro-column stub="true" align="Center" width="200px"><div border="LRTB">Stub column</div></metro-column>         <metro-column align="Center"><div border="LRTB">1</div></metro-column>     </metro-row> </metro-grid>

Ordering

Order 2
Order 1
<metro-grid>     <metro-row>         <metro-column align="Center" display-order="2"><div border="LRTB">Order 2</div></metro-column>         <metro-column align="Center" display-order="1"><div border="LRTB">Order 1</div></metro-column>     </metro-row> </metro-grid>

Vertical alignment

Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
<metro-grid >     <metro-row height="100" v-align="Start" background-color="GrayWhite">         <metro-column align="Center" ><div border="LRTB">Cell</div></metro-column>         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid> <metro-grid>     <metro-row height="100" v-align="Center" background-color="GrayWhite" class="mt-1">         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid> <metro-grid>     <metro-row height="100" v-align="End" background-color="GrayWhite" class="mt-1">         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid>

Horizontal alignment

Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
<metro-grid>     <metro-row h-align="Start" background-color="GrayWhite">         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid> <metro-grid>     <metro-row h-align="Center" background-color="GrayWhite" class="mt-1">         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid> <metro-grid>     <metro-row h-align="End" background-color="GrayWhite" class="mt-1">         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid> <metro-grid>     <metro-row h-align="Between" background-color="GrayWhite" class="mt-1">         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid> <metro-grid>     <metro-row h-align="Around" background-color="GrayWhite" class="mt-1">         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>         <metro-column size="_2" align="Center"><div border="LRTB">Cell</div></metro-column>     </metro-row> </metro-grid>