Grid

12 columns, 4 screen sizes

Standard grid system has 12 fluid columns, each of these columns will always have an equal width. Note that all columns must be wrapped inside a <div> with class="row" and that you must add the class="col" to your inner <div>s to make them into columns. We can manage columns widths and behaviors on various devices by using "class" prefixes + number of columns to set the widths:

• .s - Small Devices <=6 00px

• .m - Medium Devices > 600px

• .l - Large Devices > 992px

• .xl - Large Devices > 1200px

Rules propagate upwards. It means, you can use short definition .s4 instead of .s4 .m4 .l4 .xl4 - it is equal.

	<div class="row">
		<div class="col s12"><p>s12</p></div>
	</div>
	<div class="row">
		<div class="col s12 m4 l3"><p>s12 m4 l3</p></div>
		<div class="col s12 m4 l6"><p>s12 m4 l6</p></div>
		<div class="col s12 m4 l3"><p>s12 m4 l3</p></div>
		<div class="col s12 m12 l4"><p>s12 m12 l4</p></div>
		<div class="col s12 m12 l4"><p>s12 m12 l4</p></div>
		<div class="col s12 m12 l4"><p>s12 m12 l4</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>
		

Offsets, Push and Pull

First div is 12-columns wide on all screen sizes. Second div is 6-columns wide - medium, large screens with 3 cols offset. No offset and 12-columns wide on small screens.

	<div class="row">
		<div class="col s12"><p>s12</p></div>
		<div class="col s12 m6 offset-m3"><p>s12 m6 offset-m3</p></div>
	</div>
        

First div is 7-columns wide on pushed to the right by 5-columns. Second div is 5-columns wide pulled to the left by 7-columns.

	<div class="row">
		<div class="col s7 push-s5"><p>s7 push-s5</p></div>
		<div class="col s5 pull-s7"><p>s5 pull-s7</p></div>
	</div>
        

Nesting

First div is 12-columns wide on all screen sizes. Second div is 6-columns wide - medium, large screens with 3 cols offset. No offset and 12-columns wide on small screens.

	<div class="row">
		<div class="col no-pad s8">
			<div class="col s12 m12 l6"><p>s12 m12 l6</p></div>
			<div class="col s12 m12 l6"><p>s12 m12 l6</p></div>
		</div>
		<div class="col s3 offset-s1">
			<p>s2 offset-s1</p>
		</div>
	</div>
        

For more detailed informations please visit: http://materializecss.com/grid.html