Introduction
| Mobile Devices <= 600px | Tablet Devices > 600px | Desktop Devices > 992px | Large Desktop Devices > 1200px | |
|---|---|---|---|---|
| Class Prefix | .s | .m | .l | .xl |
| Container Width | 90% | 85% | 70% | 70% |
| Number of Columns | 12 | 12 | 12 | 12 |
Grid
bookmarkWe are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.
Basic
Take a look at this section to quickly understand how the grid works!
1
2
3
4
5
6
7
8
9
10
11
12
<div class="row"> <div class="col s1">1</div> <div class="col s1">2</div> <div class="col s1">3</div> <div class="col s1">4</div> <div class="col s1">5</div> <div class="col s1">6</div> <div class="col s1">7</div> <div class="col s1">8</div> <div class="col s1">9</div> <div class="col s1">10</div> <div class="col s1">11</div> <div class="col s1">12</div></div>Columns live inside Rows
Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns.
This div is 12-columns wide
This div is 6-columns wide
This div is 6-columns wide
<div class="row"> <div class="col s12">This div is 12-columns wide</div> <div class="col s6">This div is 6-columns wide</div> <div class="col s6">This div is 6-columns wide</div></div>Offsets
To offset, simply add offset-s2to the class where ssignifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.
This div is 12-columns wide on all screen sizes
6-columns (offset-by-6)
<div class="row"> <div class="col s12"><span >This div is 12-columns wide on all screen sizes</span></div> <div class="col s6 offset-s6"><span >6-columns (offset-by-6)</span></div></div>Push and Pull
You can easily change the order of your columns with push and pull. Simply add push-s2or pull-s2to the class where ssignifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.
This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.
<div class="row"> <div class="col s7 push-s5"><span >This div is 7-columns wide on pushed to the right by 5-columns.</span></div> <div class="col s5 pull-s7"><span >5-columns wide pulled to the left by 7-columns.</span></div></div>More Responsive Grid Examples
s12
s12 m4
s12 m4
s12 m4
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3
<div class="row"> <div class="col s12"><p>s12</p></div></div><div class="row"> <div class="col s12 m4 l2"><p>s12 m4</p></div> <div class="col s12 m4 l8"><p>s12 m4</p></div> <div class="col s12 m4 l2"><p>s12 m4</p></div></div><div class="row"> <div class="col s12 m6 l3"><p>s12 m6 l3</p></div> <div class="col s12 m6 l3"><p>s12 m6 l3</p></div> <div class="col s12 m6 l3"><p>s12 m6 l3</p></div> <div class="col s12 m6 l3"><p>s12 m6 l3</p></div></div>