Materialize CSS | Grids

There are 12 standard column fluid responsive grid system that help you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are used to specify a column with sub-classes.

There is a container class used to center the page content. The container class is set to ~70% of the window width. To add a container just put your content inside a <div> tag with a container class. Here is the syntax:

 <body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
 </body>

Now let’s understand how the grid system works:

The standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width. Remember when creating a layout that all columns must be contained inside a row and that you must add the col class to your inner <div>s to make them into columns. You can easily change the order of your columns with push and pull. Simply add push-s2 or pull-s2 to the class where s is the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns that you want to push or pull.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!--Let browser know website is 
        optimized for mobile-->
    <meta name="viewport" content=
                    "width=device-width, 
                    initial-scale=1.0" />
</head>
  
<body>
    <div class="green center">
        <h2>GeeksforGeeks</h2>
    </div>
      
    <div class="row">
        <div class="col s1 green center">1</div>
        <div class="col s1 green darken-3 center">2</div>
        <div class="col s1 green center">3</div>
        <div class="col s1 green darken-3 center">4</div>
        <div class="col s1 green center">5</div>
        <div class="col s1 green darken-3 center">6</div>
        <div class="col s1 green  center">7</div>
        <div class="col s1 green darken-3 center">8</div>
        <div class="col s1 green  center">9</div>
        <div class="col s1 green darken-3 center">10</div>
        <div class="col s1 green center">11</div>
        <div class="col s1 green darken-3 center">12</div>
    </div>
  
    <div class="row">
        <div class="col s7 push-s5 green darken-1">
            <span class="flow-text">
                This div is 7-columns wide on pushed
                to the right by 5-columns.
            </span>
        </div>
  
        <div class="col s5 pull-s7 light-green">
            <span class="flow-text">
                5-columns wide pulled to the left by
                7-columns.
            </span>
        </div>
    </div>
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Grid Classes:       The materialize grid system has four classes:

  • .s (for mobile devices)
  • .m (tablet devices)
  • .l (desktop devices)
  • .xl (large desktop devices) 
 

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%
Number of Columns 12 12 12 12

In the previous example, we only define the size for small screens using “col s12”. By just saying s12, we are essentially saying “col s12 m12 l12”. But by explicitly defining the size we can make our website more responsive.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!--Let browser know website is 
        optimized for mobile-->
    <meta name="viewport" content=
                    "width=device-width, 
                    initial-scale=1.0" />
</head>
  
<body>
    <div class="green center">
        <h2>GeeksforGeeks</h2>
    </div>
  
    <!--Responsive layout-->
    <div class="row">
        <div class="grid-example col 
            s12 light-green center">
            <span class="flow-text">
                Always full-width (col s12)
            </span>
        </div>
  
        <div class="grid-example col 
            s8 m6 green center">
            <span class="flow-text">
                Full-width on mobile (col s8 m6)
            </span>
        </div>
    </div>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.