To make your website responsive you can use a grid. You can adjust breakpoints, gutter and column amount. When using SCSS you can choose between a flexbox grid or a normal grid. For default use the grid is flexbox. Both grids have their pros and cons. Both grids offer the same breakpoints, the biggest difference between them is for push and pull.

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


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


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

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.

Note* the flexbox grid doesn't have a push pull class. You have to set these manually with the order property.

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

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

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

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


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

<div class="col s4 s-hidden">
  Small hidden

<div class="col s4 s-hidden-down">
  Hidden from all screens smaller than small

<div class="col s4 s-hidden-up">
  Hidden from all screen bigger than small

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

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

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