Materialize Grid

Materialize Grid– MaterializeCss uses 12-column fluid responsive layout grid system. All Columns have equal width no matter what is the browser’s width. Here in this tutorial we are going to explain how to create grid and use it in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Grid Example

Let us go step by step to create grid in Materialize. First we will create 12-column layout grid to understand how it works. –

12-Column Grid Example

Create a div with class “row” then add columns into it. To add columns create div then add class “col” to create column and add class “s1”. s1 class is used to create 12 column layouts which divides the screen into 12 equal columns.

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

If you run the above example it will produce the output something like this –

12 Columns & 6 Columns | Different Width Example

Sometimes we need to create columns of different-different width, You can use inbuilt classes to create columns of different width. For example to create 12 Columns(Together) you just need to add class s12 ie. you are combining 12 columns together. Suppose you want to make 2 columns only then you need to group 6-6 columns together which will create two columns of equal width, for 2 columns layout you need to add s6 class to both divs. Here is an example of both 12 and 6 column layouts-

 <div class="row">
      <div class="col s12">12 Column Full Width</div>
      <div class="col s6">6 Column(50% width)</div>
      <div class="col s6">6 Column(50% width)</div>
  </div>

If you run the above example it will produce the output something like this –

Offsets

To add offset, add offset class prefix and then add number(number of columns you want offset). Here is an example –

 <div class="row">
      <div class="col s12">12 Column Full Width</div>
      <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>
    </div>

If you run the above example it will produce output something like this –

Section

Materialize provides section class which adds simple padding at bottom and top. You can create section simply adding the section class to the div. Here is an example of simple section in Materialize –

 <div class="row">
   <div class="section">
    <h4>Section 1</h4>
    <p>Content Goes Here...</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h4>Section 2</h4>
    <p>Content Goes Here...</p>
  </div>
  </div>

If you run the above example it will produce the output something like this –

Divider

Dividers are 1 pixel line which are used to separate the contents of the page. It is very simple to create divider in Materialize framework. Materialize provides divider class to create dividers, simply add this class to the div. Here is an example of Divider in Materialize Framework.

 <div class="row">
   <div class="divider"></div>
   <div class="section">
    <h4>Section 1</h4>
    <p>Content Goes Here...</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h4>Section 2</h4>
    <p>Content Goes Here...</p>
  </div>
   <div class="divider"></div>
  <div class="section">
    <h4>Section 3</h4>
    <p>Content Goes Here...</p>
  </div>
  <div class="divider"></div>
  </div>

If you run the above example it will produce output something like this –