# Grid Row Start / End

```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 are sized and placed across grid rows.

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

| Class          | Properties                   |
| -------------- | ---------------------------- |
| row-auto       | grid-row: auto;              |
| row-span-1     | grid-row: span 1 / span 1;   |
| row-span-2     | grid-row: span 2 / span 2;   |
| row-span-3     | grid-row: span 3 / span 3;   |
| row-span-4     | grid-row: span 4 / span 4;   |
| row-span-5     | grid-row: span 5 / span 5;   |
| row-span-6     | grid-row: span 6 / span 6;   |
| row-span-7     | grid-row: span 7 / span 7;   |
| row-span-8     | grid-row: span 8 / span 8;   |
| row-span-9     | grid-row: span 9 / span 9;   |
| row-span-10    | grid-row: span 10 / span 10; |
| row-span-11    | grid-row: span 11 / span 11; |
| row-span-12    | grid-row: span 12 / span 12; |
| row-span-full  | grid-row: 1 / -1;            |
| row-start-1    | grid-row-start: 1;           |
| row-start-2    | grid-row-start: 2;           |
| row-start-3    | grid-row-start: 3;           |
| row-start-4    | grid-row-start: 4;           |
| row-start-5    | grid-row-start: 5;           |
| row-start-6    | grid-row-start: 6;           |
| row-start-7    | grid-row-start: 7;           |
| row-start-8    | grid-row-start: 8;           |
| row-start-9    | grid-row-start: 9;           |
| row-start-10   | grid-row-start: 10;          |
| row-start-11   | grid-row-start: 11;          |
| row-start-12   | grid-row-start: 12;          |
| row-start-13   | grid-row-start: 13;          |
| row-start-auto | grid-row-start: auto;        |
| row-end-1      | grid-row-end: 1;             |
| row-end-2      | grid-row-end: 2;             |
| row-end-3      | grid-row-end: 3;             |
| row-end-4      | grid-row-end: 4;             |
| row-end-5      | grid-row-end: 5;             |
| row-end-6      | grid-row-end: 6;             |
| row-end-7      | grid-row-end: 7;             |
| row-end-8      | grid-row-end: 8;             |
| row-end-9      | grid-row-end: 9;             |
| row-end-10     | grid-row-end: 10;            |
| row-end-11     | grid-row-end: 11;            |
| row-end-12     | grid-row-end: 12;            |
| row-end-13     | grid-row-end: 13;            |
| row-end-auto   | grid-row-end: auto;          |

## Spanning rows

Use the `row-span-{n}` utilities to make an element span _n_ rows.

```html preview
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3"></div>
  <div class="col-span-2"></div>
  <div class="row-span-2 col-span-2"></div>
</div>
```

## Starting and ending lines

Use the `row-start-{n}` and `row-end-{n}` utilities to make an element start or end at the _nth_ grid line. These can also be combined with the `row-span-{n}` utilities to span a specific number of rows.

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

```html preview
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2"></div>
  <div class="row-end-3 row-span-2"></div>
  <div class="row-start-1 row-end-4"></div>
</div>
```