Grid
Materialize is a modern responsive CSS framework based on Material Design by Google.
We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.
Container
The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The
container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to
contain our body content.
Demo
Try the button below to see what the page looks like without containers.
Turn off Containers
To add a container just put your content inside a
tag with a container class. Here's an example of how your page might be set up.
<body>
<div class="container">
<!-- Page Content goes here -->
</div>
</body>
Introduction
Take a look at this section to quickly understand how the grid works!
12 Columns
Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.
1
2
3
4
5
6
7
8
9
10
11
12
To get a feel of how the grid is used in HTML, take a look at the code below which will produce a similar result to the one above.
<div class="row">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
Note: For now, just know that the
s1 stands for small-1 which in plain English means "1 column on small screens".
Columns live inside Rows
Remember when you are creating your layout that all columns must be contained inside a row and that you must add the
col class to your inner divs to make them into columns
This div is 12-columns wide on all screen sizes
6-columns (one-half)
6-columns (one-half)
<div class="row">
<div class="col s12">This div is 12-columns wide on all screen sizes</div>
<div class="col s6">6-columns (one-half)</div>
<div class="col s6">6-columns (one-half)</div>
</div>
Offsets
To offset, simply add
offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l =
large) and the number after is the number of columns you want to offset by.
Attention! This changed with v2! since we are using grid now, the offset is always calculated absolutely starting from left! If you need relative offsets, then just add empty columns to the row.
This div is 12-columns wide on all screen sizes
6-columns (offset-by-6)
l6 column
l4 column (offset-l8)
offset-l3
offset-l6
offset-l9
col
relative offset 2
<div class="row">
<div class="col s12"> <span class="flow-text">This div is 12-columns wide on all screen sizes </span> </div>
<div class="col s6 offset-s6"> <span class="flow-text">6-columns (offset-by-6) </span> </div>
</div>
<div class="row">
<div class="l6"> <span class="flow-text">l6 column </span> </div>
<div class="l4 offset-l8"> <span class="flow-text">l4 column (offset-l8) </span> </div>
</div>
<div class="row">
<div class="l2 offset-l3"> <span>offset-l3 </span> </div>
<div class="l2 offset-l6"> <span>offset-l6 </span> </div>
<div class="l2 offset-l9"> <span>offset-l9 </span> </div>
</div>
<div class="row">
<div class="l2"> <span>col </span> </div>
<div class="l2"> </div>
<div class="l2"> <span>relative offset 2 </span> </div>
</div>
Gaps
There is a default gap between the rows (g-3). You can easily change the Gap between the Grid with the Gap-Classes. Simply add
g-0 to g-5 to the element with the "row" class, to change the gap size.
Standard Gaps (g-3)
1
2
3
4
No Gap (g-0)
1
2
3
Bigger Gap (g-4)
1
2
3
<div class="row g-4">
<div class="s3">1</div>
<div class="s3">2</div>
<div class="s3">3</div>
<div class="s3">4</div>
</div>
Push and Pull
Deprecated in V2.0.0, since CSS Grid is used. You can use left and right (see offsets).
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 signifies the
screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.
This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.
Creating Layouts
Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.
Section
The section class is used for simple top and bottom padding. Just add the
section class to your div's containing large blocks of content.
Divider
Dividers are 1 pixel lines that help break up your content. Just add the
divider to a div in between your content.
Example Sections and Dividers
Section 1
Stuff
Section 2
Stuff
Section 3
Stuff
<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>
<div class="divider"></div>
<div class="section">
<h5>Section 3</h5>
<p>Stuff</p>
</div>
Example Promotion Table
If we want 3 divs that are equal size, we define the divs with a width of 4-columns, as 4+4+4 nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've modified it slightly for the sake of this example.
flash_on
Speeds up development
Most of the heavy lifting is done for you to provide a default stylings that incorporate our custom components. We also refined animations and transitions to provide a smoother experience for developers.
group
User Experience Focused
By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.
settings
Easy to work with
We have provided detailed documentation as well as specific code examples to help new users get started.
<div class="row">
<div class="col s4">
<!-- Promo Content 1 goes here -->
</div>
<div class="col s4">
<!-- Promo Content 2 goes here -->
</div>
<div class="col s4">
<!-- Promo Content 3 goes here -->
</div>
</div>
Example Side Navigation Layout
You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for an even layout.
<!-- Navbar goes here -->
<!-- Page Layout here -->
<div class="row">
<div class="col s3">
<!-- Grey navigation panel -->
</div>
<div class="col s9">
<!-- Teal page content -->
</div>
</div>
Creating Responsive Layouts
Above we showed you how to layout elements using our grid system. Now we'll show you how to design your layouts so that they look great on all screen sizes.
Screen Sizes
| 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 |
Adding Responsiveness
In the previous examples, we only defined the size for small screens using "col s12". This is fine if we want a fixed layout
since the rules propagate upwards. 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.
I am always full-width (col s12)
I am full-width on mobile (col s12 m6)
<div class="row">
<div class="grid-example col s12"><span class="flow-text">I am always full-width (col s12)</span></div>
<div class="grid-example col s12 m6"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
</div>
Responsive Side Navigation Layout
In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.
<!-- Navbar goes here -->
<!-- Page Layout here -->
<div class="row">
<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
<!-- Grey navigation panel
This content will be:
3-columns-wide on large screens,
4-columns-wide on medium screens,
12-columns-wide on small screens -->
</div>
<div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
<!-- Teal page content
This content will be:
9-columns-wide on large screens,
8-columns-wide on medium screens,
12-columns-wide on small screens -->
</div>
</div>
More Responsive Grid Examples
s12
s12 m4 l2
s12 m4 l8
s12 m4 l2
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3
<div class="row">
<div class="col s12"><p>s12</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
<div class="col s12 m4 l8"><p>s12 m4</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
</div>
<div class="row">
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
</div>