Materialize CSS grids consist of a 12-column fluid responsive grid system that occupies the available screen width and it also scales depending on the size of the browser window. This grid system helps to layout the web page in an ordered and easy fashion.
Before creating responsive grid layout, let us understand the term row
and column
that are used in Materialize grid system.
Row is a padding less horizontal container that spans the width of the web page. This is a mandatory part of the grid system. To create rows assign .row
class to the <div>
element base class.
General Syntax
<div class="row"></div>
Source Code
<div class="row red lighten-1">
<div class="center-align white-text">
<b>Shape Your Path</b>
</div>
</div>
Source Code : Output
It is a vertical column inside a row. Column width can be specified through the predefined classes such as s{1-12}
,m{1-12}
,l{1-12}
,xl{1-12}
. Here s
indicates small device i.e mobile device, m
indicates tablet device, l
denoted desktop device and xl
denoted large device while {1-12}
denotes the number of columns. To create columns, add .col
class to the <div>
element base class.
General Syntax
<element class="col"></element>
Source Code
<div class="container">
<div class="row">
<div class="col s3 teal">1</div>
<div class="col s3 orange">2</div>
<div class="col s3 teal">3</div>
<div class="col s3 orange">4</div>
</div>
</div>
Source Code : Output
Materialize grids support mainly four types of screen sizes. These are small(mobile devices), medium(tablet devices), large(desktop devices, laptop), and extra large(large desktop devices), and it is denoted by .s
, .m
, l
& .xl
correspondingly.
Small - It specifies small size screens having screen size less than 600px. It is denoted by s
. For example, if you assign a .s5
class to an element then that element will span across seven virtual columns on your mobile.
Medium - It specifies medium size screens such as tablet & Its screen size will be more than 600px and less than 992px. It is denoted by m
. For example, if you assign a .m4
class to an element then that element will span across four virtual columns on your tablet.
Large - It specifies the large screens such as desktop, laptops & Its screen size will be more than 992px and less than 1200px. It is denoted by l
. For example, if you assign a .l4
class to an element then that element will span across four virtual columns on your tablet.
Extra Large - It specifies the extra large screens such as large desktop devices & Its screen size will be more than 1200px. It is denoted by xl
. For example, if you assign a .xl4
class to an element then that element will span across four virtual columns on your tablet.
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% |
No. Of Columns | 12 |
12 |
12 |
12 |
Class | Description |
---|---|
s1 | It is used to define 1 of 12 columns of the small device having width as 08.33% |
s2 | It is used to define 2 of 12 columns of the small device having width as 15.66% |
s3 | It is used to define 3 of 12 columns of the small device having width as 25% |
s4 | It is used to define 4 of 12 columns of the small device having width as 33.33% |
.... | .... |
s12 | It is used to define 12 of 12 columns of the small device having width as 100% |
Class | Description |
---|---|
m1 |
It is used to define 1 of 12 columns of the medium size device having width as 08.33% |
m2 |
It is used to define 2 of 12 columns of the medium size device having width as 15.66% |
m3 |
It is used to define 3 of 12 columns of the medium size device having width as 25% |
m4 |
It is used to define 4 of 12 columns of the medium size device having width as 33.33% |
.... | .... |
m12 |
It is used to define 12 of 12 columns of the medium size device having width as 100% |
Class | Description |
---|---|
l1 | It is used to define 1 of 12 columns of the large devices having width as 08.33% |
l2 | It is used to define 2 of 12 columns of the large devices having width as 15.66% |
l3 | It is used to define 3 of 12 columns of the large devices having width as 25% |
l4 | It is used to define 4 of 12 columns of thelarge devices having width as 33.33% |
.... | .... |
l12 | It is used to define 12 of 12 columns of the large devices having width as 100% |
Class | Description |
---|---|
xl1 | It is used to define 1 of 12 columns of the extra large devices having width as 08.33% |
xl2 | It is used to define 2 of 12 columns of the extra large devices having width as 15.66% |
xl3 | It is used to define 3 of 12 columns of the extra large devices having width as 25% |
xl4 | It is used to define 4 of 12 columns of the extra large devices having width as 33.33% |
.... | .... |
xl12 | It is used to define 12 of 12 columns of the extra large devices having width as 100% |
Materialize CSS provides different screen size classes.
s{1-12}
-s
denotes small size screen while {1-12} denotes column number.m{1-12}
-s
denotes medium size screen while {1-12} denotes column number.l{1-12}
-s
denotes large size screen while {1-12} denotes column number.General Syntax
<element class="col"></element>
<element class="col-{s|m|l|xl}{1 to 12}"></element>
Source Code
<div class="container">
<div class="row">
<div class="col s1 teal ">1</div>
<div class="col s1 orange">2</div>
<div class="col s1 teal ">3</div>
<div class="col s1 orange ">4</div>
<div class="col s1 teal ">5</div>
<div class="col s1 orange ">6</div>
<div class="col s1 teal ">7</div>
<div class="col s1 orange ">8</div>
<div class="col s1 teal ">9</div>
<div class="col s1 orange ">10</div>
<div class="col s1 teal ">11</div>
<div class="col s1 orange ">12</div>
</div>
</div>
Source Code : Output
Materialize CSS container is mainly used to center the web contents and it covers almost 70% of the window's width. It is not a mandatory part of the grid system.
General Syntax
<element class="container"></element>
Source Code
<div class="container teal">
<p class="center-align white-text">Shape Your Path</p>
</div>
Source Code : Output
Shape Your Path
Materialize CSS grids have 12 columns. Each of these columns always contains equal width.
General Syntax
<element class="col"></element>
Source Code
<div class="row">
<div class="col s1 teal">1</div>
<div class="col s1 orange">2</div>
<div class="col s1 teal">3</div>
<div class="col s1 orange">4</div>
<div class="col s1 teal">5</div>
<div class="col s1 orange">6</div>
<div class="col s1 teal">7</div>
<div class="col s1 orange">8</div>
<div class="col s1 teal">9</div>
<div class="col s1 orange">10</div>
<div class="col s1 teal">11</div>
<div class="col s1 orange">12</div>
</div>
Keep in mind that, You have to place all columns under a row class while building a web layout. if a row contains more than 12 columns, then the last element will be pushed to the next line.
Source Code
<div class="row">
<div class="col s12 teal lighten-2 blocks"> This div is 12 columns wide </div>
</div>
<div class="row">
<div class="col s6 teal lighten-2 blocks"> This div is 6 columns wide </div>
<div class="col s6 red lighten-2 blocks"> This div is 6 columns wide </div>
</div>
Source Code : Output
Materialize responsive grid system adjusts itself according to the available device viewport width.
Follow the following rules to create a responsive web page layout.
sn
then you define that the column will occupy n
columns in all the screen sizes (small, medium,large, extra large screen sizes). For example, col s6 will result in six columns on a small screen or any size larger than the small screen.
mn
then you define that the column will occupy n
columns in medium, large, extra large screen sizes. For example, col m6 will result in six columns on a medium screen, large screen and extra large screen.
ln
then you define that the column will occupy n
columns in large, extra large screen sizes. For example, col l6 will result in six columns on a large screen and extra large screen.
xln
then you define that the column will occupy n
columns in large screen sizes. For example, col xl6 will result in six columns on a extra large screen.
Source Code
<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>
Source Code : Output
s12
s12 m4
s12 m4
s12 m4
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3
Materialize offset is used to create empty space between elements which may be equal to a certain number of columns. It can be created easily by just assigning offset class (.offset-{s/m/l}[1 to 12]
) to the column base class.
Let us understand it. The col s6 offset-s3
means the small screen has 6 columns and has equal 3-column space around the existing column i.e left and right of the container.
General Syntax
<element class="offset-{s{1 to 12}|m{1 to 12}|l{1 to 12}|xl{1 to 12}}"></element>
Source Code
<div class="container">
<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>
</div>
Source Code : Output
s12
( offset-s3 offset-m3 )
( offset-s6 offset-m6 )
s6 m6
Push and pull classes are used to change the column order. The general syntax of push and pull is :
push-{s/m/l}[1 to 12 ]
&& pull-{s/m/l}[1 to 12 ]
where (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.
General Syntax
<element class="push-{s|m|l|xl}{1 to 12}"></element>
<element class="pull-{s|m|l|xl}{1 to 12}"></element>
Source Code
<div class="container">
<div class="row">
<div class="col s6 push-s6 teal white-text">
<span class="flow-text"><p>This div is 6-columns wide on pushed to the right by 6-columns.</p></span>
</div>
<div class="col s6 pull-s6 orange white-text">
<span class="flow-text"><p>6-columns wide pulled to the left by 6-columns.</p></span>
</div>
</div>
</div>
Source Code : Output
This div is 6-columns wide on pushed to the right by 6-columns.
6-columns wide pulled to the left by 6-columns.
The section class is used to create the top and bottom padding inside the container.
General Syntax
<element class="section"></element>
Source Code
<div class="section">
<h5>Section</h5>
<p>Section To Create Top & Bottom Padding</p>
</div>
Source Code : Output
Section To Create Top & Bottom Padding
Dividers are 1-pixel lines that help to break up your content. Just add the .divider
class to the <div >
in between your content.
General Syntax
<element class="divider"></element>
Source Code
<div class="divider"></div>
<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>
Source Code : Output
Stuff
Stuff
Materialize CSS grids are working on the concepts of 12-column fluid responsive grid system. It has mainly four screen sizes namely small, medium, large and extra large. Row and columns are the mandatory part of the materialize grid system. Columns are always placed inside the row. You can make a responsive website easily and quickly through the Materialize grid system.