--- title: Spacing --- ## Grid ### Responsive container Use the `responsive-container` class to apply responsive horizontal margins and a max-width that fits our [layout grid](https://www.figma.com/file/svEAhwa9aGljDbcKfOCBsq/Layout?node-id=862%3A98). ```html wrapper_class="p-0"

``` ### Responsive grid Use the `responsive-grid` class to create responsive grid layouts. You can customize the number of columns by adding `grid-cols-*` utilities (and responsive variants). You can adjust the column and row spans for grid elements with the `col-span-*` and `row-span-*` utilities and their responsive variants. ```html

{%- for i in range(28) %}

{%- endfor %}

``` Combine `responsive-grid` and [`responsive-container`](#responsive-container) for fully responsive grid layouts. ```html id="responsive-grid-container"

{%- for i in range(6) %}

{%- endfor %}

``` ### 12-column grid ```html

{%- for i in range(28) %}

{%- endfor %}

``` ### 12-column grid with variable column widths ```html

``` ### 3-column grid ```html

{%- for i in range(13) %}

{%- endfor %}

``` ### 2-column grid ```html

{%- for i in range(9) %}

{%- endfor %}

``` ## Padding ```html

{%- for name, value in tokens.spacing %}

p-{{name }}

{%- endfor %}

``` ## Margin ```html

{%- for name, value in tokens.spacing %}

m-{{ name }}

{%- endfor %}

``` ## Size ### Width ```html

{%- for name, value in tokens.spacing %}

w-{{ name }}

{%- endfor %}

``` ### Height ```html

{%- for name, value in tokens.spacing %}

h-{{ name }}

{%- endfor %}

```