# Grid > source: [scss/parts/grid](../../src/scss/parts/_grid.scss) ## SCSS variables ```scss $grid-breakpoints: ( base: 0, // Applies all width size. sm: 576px, md: 768px, lg: 992px, xl: 1200px, ) !default; $grid-columns: 12 !default; $grid-gutter-width: $space-4 !default; // Grid containers $container-max-widths: ( sm: 96%, md: 92%, lg: 88%, xl: 88%, ) !default; ``` ## Usage ### Responsive ```html

default: all devices.

small: 576px <= screen-width < 768px

medium: 768px <= screen-width < 992px

large: 992px <= screen-width < 1200px

extra large: 1200px <= screen-width

``` ### mixed ```html

responsive

``` ### Equal width ```html

1 of 3

``` ### Setting one column width ```html

1 of 3

2 of 3 (half of full width)

3 of 3

``` ### Variable width by content ```html

col

Variable width by content

col

``` ### No gutters ```html

no-gutter column

``` ### Offsetting columns ```html

col-md-4

col-md-4 offset-md-4

``` ### Push and pull ```html

first but pushed

second but pulled

```