menu

Materialize Grid


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

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 ana example of both 12 and 6 column layouts-

12 Columns & 6 Columns Layout Example:

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:

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

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 ?

Try it »

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

Materialize Grid Example

Advertisements