Materialize provides a 12 column fluid responsive grid.
It uses the row and col style classes to define rows and columns respectively.
It uses the row and col style classes to define rows and columns respectively.
Columns for Small Screen Devices
Here is a list of column-level styles for small screen devices, typically smartphones.| S.N. | Class Name & Description | |
|---|---|---|
| 1 | s1 Defines 1 of 12 columns with width as 08.33%. | |
| 2 | s2 Defines 2 of 12 columns with width as 16.66%. | |
| 3 | s3 Defines 3 of 12 columns with width as 25.00%. | |
| 4 | s4 Defines 4 of 12 columns with width as 33.33%. | |
| s5 - s11 | ||
| 12 | s12 Defines 12 of 12 columns with width as 100%. Default class for small screen phones. | |
Columns for Medium Screen Devices
Here is a list of column-level styles for medium screen devices, typically tablets.| S.N. | Class Name & Description | |
|---|---|---|
| 1 | m1 Defines 1 of 12 columns with width as 08.33%. | |
| 2 | m2 Defines 2 of 12 columns with width as 16.66%. | |
| 3 | m3 Defines 3 of 12 columns with width as 25.00%. | |
| 4 | m4 Defines 4 of 12 columns with width as 33.33%. | |
| m5 - m11 | ||
| 12 | m12 Defines 12 of 12 columns with width as 100%. Default class for medium screen phones. | |
Columns for Large Screen Devices
Here is a list of column-level styles for large screen devices, typically laptops.| S.N. | Class Name & Description | |
|---|---|---|
| 1 | l1 Defines 1 of 12 columns with width as 08.33%. | |
| 2 | l2 Defines 2 of 12 columns with width as 16.66%. | |
| 3 | l3 Defines 3 of 12 columns with width as 25.00%. | |
| 4 | l4 Defines 4 of 12 columns with width as 33.33%. | |
| l5 - l11 | ||
| 12 | l12 Defines 12 of 12 columns with width as 100%. Default class for large screen devices. | |
Usage
Each subclass determines the number of columns of the grid to be used based on the type of a device. Consider the following HTML snippet.<div class="row"> <div class="col s2 m4 l3"> <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p> </div> </div>Default columns to be used are 12 on a device if a sub-class is not mentioned in the class attribute of an HTML element.
Example
materialize_grids.htm<!DOCTYPE html> <html> <head> <title>The Materialize Grids Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body> <div class="teal"> <h2>Mobile First Design Demo</h2> <p>Resize the window to see the effect!</p> </div> <hr/> <div class="row"> <div class="col m1 grey center">1</div> <div class="col m1 center">2</div> <div class="col m1 grey center">3</div> <div class="col m1 center">4</div> <div class="col m1 grey center">5</div> <div class="col m1 center">6</div> <div class="col m1 center grey">7</div> <div class="col m1 center">8</div> <div class="col m1 center grey">9</div> <div class="col m1 center">10</div> <div class="col m1 center grey">11</div> <div class="col m1 center">12</div> </div> <div class="row"> <div class="col m4 l3 yellow"> <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p> </div> <div class="col s4 m8 l9 grey"> <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p> </div> </div> </body> </html>
Result
Verify the result.Mobile First Design Demo
Resize the window to see the effect!
1
2
3
4
5
6
7
8
9
10
11
12
This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).
This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).
No comments:
Post a Comment