Grid

To make your website responsive you can use a grid. You can adjust breakpoints, gutter and column amount.

Breakpoint Window Columns Gutter
0 xs 4 16
480 xs 4 16
600 s 8 16
720 s 12 24
960 s 12 24
1280 m 12 24
1600 l 12 24
1920 xl 12 24

Row

You can use .row so that it's all in one line.

Columns

There are 5 breakpoints .xs, .s, .m, .l and .xl to suit your needs. In order to make the columns work you need to wrap it inside a .row

            
<div class="row">
  <div class="col xs4 s12 m6">
    Example
  </div>
</div>
			
		

You can also use the row and columns in SCSS by simply extending the class.

			
@extend .col, .s12, .m6;
			
		

To follow the Material Design specifications as closely as possible some breakpoints have different settings. .xs Only has 4 columns, s has 8 to 12 columns depending on the width of the screen.

Push, pull and offset

You can also push, pull and offset which work the same as the columns. So .push-s, .pull-s, .offset-s these examples are for small screen but they work with all sizes named before.

        
<div class="row">
	<div class="col xs4 s12 m6 offset-m6">
		Example
	</div>
</div>

@extend .col, .s12, .m6, offset-m6;

<div class="row">
  <div class="col xs4 s12 m6 push-m6">
    Display 1
  </div>

  <div class="col xs4 s12 m6 pull-m6">
    Display 2
  </div>
</div>
		
	

Hidden

If you want an element to be hidden for a certain device you can use the following classes: .xs-hidden, .s-hidden, .m-hidden, .l-hidden and .xl-hidden.

XSmall hidden
Small hidden
Medium hidden
Large hidden
XLarge hidden
		
<div class="col s4 s-hidden">
  Small hidden
</div>

<div class="col s4 m-hidden">
  Medium hidden
</div>

<div class="col s4 l-hidden">
  Large hidden
</div>
		
	

Media queries

There are also a couple of media queries you can use with SCSS. The media queries you can use are listed here.

You can use the media queries like the following example: @media #{$medium-up}.

Grid settings

Variable Options Results
$xsmall-screen Variable / Change the width of xsmall screens
$small-screen Variable / Change the width of small screens
$medium-screen Variable / integer Change the width of medium screens
$large-screen Variable / integer Change the width of large screens
$xlarge-screen Variable / integer Change width of xlarge screen
$gutter Variable / integer Change the width of the gutter (space between columns)
$large-gutter Variable / integer Change the width of the gutter for medium and up
$columns Variable / integer Change the amount of columns

Resources