There are 12 standard columns fluid responsive grid systems that helps 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 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:
html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -