Breakpoints & Grid System

Mixins to control style properties in different screen sizes.

SDS includes a robust and fully flexible grid system to make designing/developing responsive projects as efficient as possible. The grid system consists of six(6) breakpoints and four(4) grid variations which can be viewed below.

Grid Range/ Breakpoint Name	Viewport Size	# of Columns	Margin/ Gutter
screen-xs	0 – 599px	4	16/16
screen-sm	600 – 767px	8	16/16
screen-md	768 – 1023px	8	16/16
screen-lg	1024 – 1279px	12	16/16
screen-xl	1280 – 1599px	12	24/24
screen-2xl	1600px +	16	24/24

There are some nuances between Design and Development and how the grid system is implemented. Both topics are covered in the following sections:

DesignDevelopment