How to use materialize grid system? With Example

Material Design - Interview Questions

Materialize CSS provides a 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.

Materialized CSS Grid System :

	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

Responsive Grid Examples :

<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>