# Grid Template Rows

```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 specifying the rows in a grid layout.

<div class="scroll-table-prefix"></div>

| Class          | Properties                                      |
| -------------- | ----------------------------------------------- |
| grid-rows-1    | grid-template-rows: repeat(1, minmax(0, 1fr));  |
| grid-rows-2    | grid-template-rows: repeat(2, minmax(0, 1fr));  |
| grid-rows-3    | grid-template-rows: repeat(3, minmax(0, 1fr));  |
| grid-rows-4    | grid-template-rows: repeat(4, minmax(0, 1fr));  |
| grid-rows-5    | grid-template-rows: repeat(5, minmax(0, 1fr));  |
| grid-rows-6    | grid-template-rows: repeat(6, minmax(0, 1fr));  |
| grid-rows-7    | grid-template-rows: repeat(7, minmax(0, 1fr));  |
| grid-rows-8    | grid-template-rows: repeat(8, minmax(0, 1fr));  |
| grid-rows-9    | grid-template-rows: repeat(9, minmax(0, 1fr));  |
| grid-rows-10   | grid-template-rows: repeat(10, minmax(0, 1fr)); |
| grid-rows-11   | grid-template-rows: repeat(11, minmax(0, 1fr)); |
| grid-rows-12   | grid-template-rows: repeat(12, minmax(0, 1fr)); |
| grid-rows-none | grid-template-rows: none;                       |

## Usage

Use the `grid-rows-{n}` utilities to create grids with _n_ equally sized rows.

```html preview
<div class="grid grid-rows-3 grid-flow-col 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>
```