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


Materialize Grid - 12 Columns Grid

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.

Materialize Grid Example: 12 Column Grid

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

Try it »

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

Materialize Grid - 12 Columns Grid

Learn More

Let us have some example and demo about the Materialize Grids.


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-

12 Columns & 6 Columns Layout Example:

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

Try it »

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

12 Columns & 6 Columns Together Example

Offsets

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

Materialize Grid Offset 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>

Try it »

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

Materialize Offset Grid  Example

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 –

How to create 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>

Try it »

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

Materialize Section  Class Example

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.

How to create Divider in Materialize ?

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

Try it »

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

Materialize Grid Example


Advertisements

Add Comment

📖 Read More