materialize provides a 12 column fluid responsive grid.
it uses the row and column style classes to define rows and columns respectively.
| sr.no. | class name & description |
|---|---|
| 1 |
row specifies a padding-less container to be used for responsive columns. this class is mandatory for responsive classes to be fully responsive. |
| 2 |
col specifies a column with sub-classes. |
col has several sub-classes meant for different types of screens.
columns for small screen devices
following is a list of column-level styles for small screen devices, typically smartphones.
| sr.no. | 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
following is a list of column-level styles for medium screen devices, typically tablets.
| sr.no. | 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
following is a list of column-level styles for large screen devices, typically laptops.
| sr.no. | 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
<!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>
output
verify the output.
