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.

 

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9
      
10
      
11
      
12
    

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-

 

      
12 Column Full Width
      
6 Column(50% width)
      
6 Column(50% width)
  

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 –

 

      
12 Column Full Width
      
6-columns (offset-by-6)
    

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 –

 

   

    
Section 1
    
Content Goes Here...
  
  

  

    
Section 2
    
Content Goes Here...
  
  

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.

 

   

   

    
Section 1
    
Content Goes Here...
  
  

  

    
Section 2
    
Content Goes Here...
  
   

  

    
Section 3
    
Content Goes Here...
  
  

  

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

Materialize Container Materialize provides container class which is used to create the content container. Container class creates a container of width 70% of the window width. It centers the content of the page. Here in this tutorial we are going to explain how to create container and use it in Materialize framework. You can also use our online editor to edit and run the code online.

Materialize Container Example

To create container add container class to the div. Let us create first container using this class-

Container

  
Container

In the above example we have created container using class container, we have added a background of yellow color so that we can have clear view how container class works.

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

MaterializeCss Installation(Environment Setup): It is very easy to setup environment for Materialize Css. Here in this tutorial we are going to explain how you can install Materialize Css. –

Materialize Installation Steps

There are two ways to install Materialize –

• Install Locally: To install Materialize Locally Download materialize.min.css and materialize.min.js and include it on page.
• CDN Based Installation: You can also install materialize from CDN based network. You can directly include the files from Content Delivery Networks.

Install Locally:

To install locally download the materialize.min.css and materialize.min.js from http://materializecss.com/getting-started.html And keep them in js and css folder and simply include as below –

jQuery is required so do not forget to include it.

CDN Based Installation

You can also install materialized css and js from CDN simply as below –

Now you are ready to go and You can create your first page in Materialize.
So let us create an example.

Example

Let us create an example using the CDN based installation of Materialize Css and Js.

  
    
      
      
      
      
  
   
    
  
  

      
      
    
    
    
My First App
    
  

Materialize Tutorial : Materialize is modern responsive front-end framework which is based on the Material Design. Materialize framework is created with Html, Css and JavaScript. Materialize framework enables us to create responsive, beautiful websites, apps. Materialize is very easy to learn and implement.

Here in this tutorial we are going to explain each topic with various examples & demos which will help us to learn the things in an easy way. You can use our online editor to edit and run the code online.

Materialize Tutorial With Example & Demo

Materialize provides rich layouts, responsive animations, transitions,depth effects such as lighting, shadows, autocomplete, swipe and switches etc which makes it most powerful UI Component. We are sure once you will use it, You will love it.

What You Should Know?

Before Starting you might be aware of HTML, JavaScript, jQuery And Css.

Materialize Features

Let us have look over some core features of Materialize Framework-

• Speed Of Development– Materialize provides so many inbuilt utilities which boosts the speed of development.
• Focused on User Experience– As we know Materialize is based on Material design, which enables us to create application which can deliver the best user experience.
• Easy To Learn– Materialize is very easy to learn and understand, you can create cool web pages easily in materialize framework.

Learn With Example And Demo

You can Learn Materialize With our online editor to edit and run the code online.

  
    
      
      
      
      
  

  
  

      
      
    

    
    
Materialize Tutorial With Example & Demo!
    
          

We hope this tutorial will be helpful for you in understanding the Materialize Basic concept.

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