Materialize 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 containerclass 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.
12 Columns
Take a look at this section to quickly understand how the grid works!
Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.
To get a feel of how the grid is used in HTML. Take a look at this code below which will produce a similar result as the one above.
Note: For now, just know that the s1stands 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 colclass to your inner divs to make them into columns
Offsets
To offset, simply add offset-s2to the class where ssignifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.
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 sectionclass to your div's containing large blocks of content.
Divider
Dividers are 1 pixel lines that help break up your content. Just add the dividerto a div in between your content.
Example Sections and Dividers
Section 1
Stuff
Section 2
Stuff
Section 3
Stuff
Example Promotion Table
If we want 3 divs that are equal size, we define the divs with a width of 4-columns, 4+4+4 = 12, which 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.
Speeds up development
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.
User Experience Focused
By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.
Easy to work with
We have provided detailed as well as specific code examples to help new users get started.
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.
| Mobile Devices <= 600px | Tablet Devices <= 992px | Desktop Devices >= 992px | |
|---|---|---|---|
| Class Prefix | .s | .m | .l |
| Container Width | 85% | 85% | 70% |
| Number of Columns | 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 propogate 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.