Materialize - Grids

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

Live Demo

<!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.