# Gap

Utilities for controlling gutters between grid rows and columns.

The following is the list of supported gaps. They can be specified as `gap-[key]`, `gap-x-[key]` or `gap-y-[key]` each mapped to CSS as either 'gap:', 'row-gap:' or 'column-gap' respectively.

| Key | Equals                    |
| --- | ------------------------- |
| 0   | 0                         |
| 1   | `--sl-spacing-xxx-small` |
| 2   | `--sl-spacing-xx-small` |
| 3   | `--sl-spacing-x-small`  |
| 4   | `--sl-spacing-small`    |
| 5   | `--sl-spacing-medium`   |
| 6   | `--sl-spacing-large`    |
| 7   | `--sl-spacing-x-large`  |
| 8   | `--sl-spacing-xx-large` |
| 9   | `--sl-spacing-xxx-large` |

## Usage

Use `gap-{size}` to change the gap between both rows and columns in grid layouts.

```html preview
<div class="grid gap-4 grid-cols-2">
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
</div>
```

### Changing row and column gaps independently

Use `gap-x-{size}` and `gap-y-{size}` to change the gap between rows and columns independently.

```html preview
<div class="grid gap-x-8 gap-y-4 grid-cols-3">
  <sl-button>1</sl-button>
  <sl-button>2</sl-button>
  <sl-button>3</sl-button>
  <sl-button>4</sl-button>
  <sl-button>5</sl-button>
  <sl-button>6</sl-button>
</div>
```