Materialize CSS Grids

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.

Creating Responsive Layouts

Before creating responsive grid layout, let us understand the term row and column that are used in Materialize grid system.

Row

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>
     
Try It Now

Source Code

     
      <div class="row red lighten-1">
    <div class="center-align white-text">
    	<b>Shape Your Path</b>
    </div>
</div>     
    
Try it yourself

Source Code : Output

Shape Your Path

Columns(col)

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>
     
Try It Now

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>     
    
Try it yourself

Source Code : Output

1
2
3
4

Screen Sizes

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

Columns for Small Screen Devices

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%

Columns for Medium Size Screen Devices

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%

Columns for Large Size Screen Devices

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%

Columns for Extra Large Size Screen Devices

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>
     
Try It Now

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>     
    
Try it yourself

Source Code : Output

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

Container

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>
     
Try It Now

Source Code

     
      <div class="container teal">
     <p class="center-align white-text">Shape Your Path</p>
  </div>     
    
Try it yourself

Source Code : Output

Shape Your Path

12-Column Grid Layout

Materialize CSS grids have 12 columns. Each of these columns always contains equal width.

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

General Syntax

    <element class="col"></element>
     
Try It Now

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>     
    
Try it yourself

Columns live inside Rows

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>     
    
Try it yourself

Source Code : Output

This div is 12 columns wide
This div is 6 columns wide
This div is 6 columns wide

Adding Responsiveness

Materialize responsive grid system adjusts itself according to the available device viewport width.

Follow the following rules to create a responsive web page layout.

  • When you specify 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.
  • When you specify 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.
  • When you specify 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.
  • When you specify 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>     
    
Try it yourself

Source Code : Output

s12

s12 m4

s12 m4

s12 m4

s12 m6 l3

s12 m6 l3

s12 m6 l3

s12 m6 l3

Materialize CSS grids: Offsets

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>
     
Try It Now

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>     
    
Try it yourself

Source Code : Output

s12

( offset-s3 offset-m3 )

( offset-s6 offset-m6 )

s6 m6

Push and Pull

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>
     
Try It Now

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>     
    
Try it yourself

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.

Section

The section class is used to create the top and bottom padding inside the container.

General Syntax

    <element class="section"></element>
     
Try It Now

Source Code

     
      <div class="section">
  <h5>Section</h5>
  <p>Section To Create Top & Bottom Padding</p>
</div>     
    
Try it yourself

Source Code : Output

Section

Section To Create Top & Bottom Padding

Divider

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>
     
Try It Now

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>     
    
Try it yourself

Source Code : Output

Section 1

Stuff

Section 2

Stuff

Conclusion

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.

Web Tutorials

Materialize CSS Grids
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS