Grid system

@@adsense
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
Condensed grid
1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12

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:

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>
            
@@hit