---
description: Mixins to control style properties in different screen sizes.
---

# Breakpoints & Grid System

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          |

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FN7MmIFkDrncio9l3uSIv%2FGS_Breakpoints%20%2B%20Instance%20Coverage.png?alt=media\&token=9d25caa2-fda5-45fc-96fb-04ef0ffadb12)

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

{% content-ref url="breakpoints-grid/design" %}
[design](breakpoints-grid/design)
{% endcontent-ref %}

{% content-ref url="breakpoints-grid/development" %}
[development](breakpoints-grid/development)
{% endcontent-ref %}
