Materialize CSS
Materialize Grids
Materialize CSS provides a 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.
row

It is used to specify a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.

<body>
  <div class="row red lighten-1">
    <div class="center-align white-text">
    	<h4>www.freetimelearning.com</h4>
    </div>
  </div>
</body>
Output :
container

The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. We use the container to contain our body content.

<body>
  <div class="container red lighten-1">
    <div class="center-align white-text">
    	<h4>www.freetimelearning.com</h4>
    </div>
  </div>
</body>
Output :
Materialized CSS Grid System
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
col

It is used to specify a column with sub-classes.

Our standard grid has 12 columns. We only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propagate upwards. By just saying s12, we are essentially saying "col s12 m12 l12".

<div class="row">
  <div class="col s1 red lighten-1">1</div>
  <div class="col s1 red lighten-1">2</div>
  <div class="col s1 red lighten-1">3</div>
  <div class="col s1 red lighten-1">4</div>
  <div class="col s1 red lighten-1">5</div>
  <div class="col s1 red lighten-1">6</div>
  <div class="col s1 red lighten-1">7</div>
  <div class="col s1 red lighten-1">8</div>
  <div class="col s1 red lighten-1">9</div>
  <div class="col s1 red lighten-1">10</div>
  <div class="col s1 red lighten-1">11</div>
  <div class="col s1 red lighten-1">12</div>
</div>
Output :
Responsive Grid Examples
<div class="row center-align">
    <div class="col s12 blue"><p>s12</p></div>
</div>
<div class="row center-align">
    <div class="col s12 m4 l2 purple"><p>s12 m4</p></div>
    <div class="col s12 m4 l8 red lighten-1"><p>s12 m4</p></div>
    <div class="col s12 m4 l2 purple"><p>s12 m4</p></div>
</div>
<div class="row center-align">
    <div class="col s12 m6 l3 blue"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3 amber"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3 blue"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3 yellow accent-4"><p>s12 m6 l3</p></div>
</div>
Output :
Offsets

To offset, simply add offset-m3 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by following example :

<div class="row center-align">
    <div class="col s12 blue white-text"><p>s12</p></div>
</div>
<div class="row center-align">
    <div class="col s6 m6 offset-s3 offset-m3 purple white-text"><p>( offset-s3 offset-m3 )</p></div>
</div>
<div class="row center-align">
    <div class="col s6 m6 offset-s6 offset-m6 teal white-text"><p>( offset-s6 offset-m6 )</p></div>
</div>
<div class="row center-align">
    <div class="col s6 m6 green white-text"><p>s6 m6</p></div>
</div>
Output :
Push and Pull

Simply add push-m2 or pull-m2 to the class where s signifies 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 following example :

<div class="row">
      <div class="col s7 push-s5 lime accent-2">
      	<span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span>
      </div>
      <div class="col s5 pull-s7 amber darken-1">
        <span class="flow-text">5-columns wide pulled to the left by 7-columns.</span>
      </div>
</div>
Output :
Section

The section class is used for simple top and bottom padding. Just add the section class to your div's containing large blocks of content.

Divider

Dividers are 1 pixel lines that help break up your content. Just add the divider to a div in between your content.

<div class="container">
    <div class="section">
        <h5>Section 1</h5>
        <p>Stuff</p>
    </div>
    <div class="divider"></div>
    <div class="section">
        <h5>Section 2</h5>
        <p>Stuff</p>
    </div>
    <div class="divider"></div>
      <div class="section">
        <h5>Section 3</h5>
        <p>Stuff</p>
    </div>
</div>
Output :