# Grid Auto Flow

```html display
<sl-alert type="warning" open>
  <strong>Deprecated</strong><br/>Grid style classes is deprecated. Use sl-grid component instead.</sl-alert>
```

Utilities for controlling how elements in a grid are auto-placed.

| Class               | Properties                    |
| ------------------- | ----------------------------- |
| grid-flow-row       | grid-auto-flow: row;          |
| grid-flow-col       | grid-auto-flow: column;       |
| grid-flow-row-dense | grid-auto-flow: row dense;    |
| grid-flow-col-dense | grid-auto-flow: column dense; |

## Usage

Use the `grid-flow-{keyword}` utilities to control how the auto-placement algorithm works for a grid layout.

```html preview
<div class="grid grid-flow-col grid-cols-3 grid-rows-3 gap-4">
  <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>
  <sl-button>7</sl-button>
  <sl-button>8</sl-button>
  <sl-button>9</sl-button>
</div>
```