# Grids

## Default grid:

### Container classes

`grid--default`

### Usage

<div align="left"><img src="https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MNw_A2cIlo548gpIa3-%2F-MNwcJn0tePz18AktfnG%2Fimage.png?alt=media&#x26;token=45a24f7c-9cba-4719-b6f7-55e255a34db1" alt=""></div>

This grid should be used within each `tab-content` and `page-content` element. It is used to ensure that the default spacing between elements is correct.

## Thirds grid:

### Container classes

`grid--thirds`

### Usage

<div align="left"><img src="https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MNw_A2cIlo548gpIa3-%2F-MNwdY4_cbab3Z-DSGFn%2Fimage.png?alt=media&#x26;token=095c6649-442c-467f-9458-92f130d37d5c" alt="The thirds grid being used to correctly space action blocks "></div>

<div align="left"><img src="https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MNw_A2cIlo548gpIa3-%2F-MNwkIwM3qWzVRgOX_T_%2Fimage.png?alt=media&#x26;token=565117dc-0cdb-4ab0-8405-a224eb4a3971" alt="The thirds grid within a default grid containing action blocks"></div>

This grid should be placed within the default grid in order to create a 3 across layout.