# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-row.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "grid-row";
export const description = "Utilities for controlling how elements are sized and placed across grid rows.";

<ApiTable
  rows={[
    ["row-span-<number>", "grid-row: span <number> / span <number>;"],
    ["row-span-full", "grid-row: 1 / -1;"],
    ["row-span-(<custom-property>)", "grid-row: span var(<custom-property>) / span var(<custom-property>);"],
    ["row-span-[<value>]", "grid-row: span <value> / span <value>;"],
    ["row-start-<number>", "grid-row-start: <number>;"],
    ["-row-start-<number>", "grid-row-start: calc(<number> * -1);"],
    ["row-start-auto", "grid-row-start: auto;"],
    ["row-start-(<custom-property>)", "grid-row-start: var(<custom-property>);"],
    ["row-start-[<value>]", "grid-row-start: <value>;"],
    ["row-end-<number>", "grid-row-end: <number>;"],
    ["-row-end-<number>", "grid-row-end: calc(<number> * -1);"],
    ["row-end-auto", "grid-row-end: auto;"],
    ["row-end-(<custom-property>)", "grid-row-end: var(<custom-property>);"],
    ["row-end-[<value>]", "grid-row-end: <value>;"],
    ["row-auto", "grid-row: auto;"],
    ["row-<number>", "grid-row: <number>;"],
    ["-row-<number>", "grid-row: calc(<number> * -1);"],
    ["row-(<custom-property>)", "grid-row: var(<custom-property>);"],
    ["row-[<value>]", "grid-row: <value>;"],
  ]}
/>

## Examples

### Spanning rows

Use `row-span-<number>` utilities like `row-span-2` and `row-span-4` to make an element span _n_ rows:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="row-span-3 grid place-content-center rounded-lg bg-fuchsia-500 p-4">01</div>
        <div className="col-span-2 grid place-content-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          02
        </div>
        <div className="col-span-2 row-span-2 grid place-content-center rounded-lg bg-fuchsia-500 p-4">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:row-span-2,row-span-3] -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="col-span-2 row-span-2 ...">03</div>
</div>
```

</Figure>

### Starting and ending lines

Use `row-start-<number>` or `row-end-<number>` utilities like `row-start-2` and `row-end-3` to make an element start or end at the _nth_ grid line:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-flow-col grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="row-span-2 row-start-2 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">01</div>
        <div className="row-span-2 row-end-3 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">02</div>
        <div className="row-start-1 row-end-4 grid place-content-center rounded-lg bg-blue-500 p-4 sm:p-12">03</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:row-start-1,row-start-2,row-end-3,row-end-4] -->
<div class="grid grid-flow-col grid-rows-3 gap-4">
  <div class="row-span-2 row-start-2 ...">01</div>
  <div class="row-span-2 row-end-3 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>
```

</Figure>

These can also be combined with the `row-span-<number>` utilities to span a specific number of rows.

### Using a custom value

<UsingACustomValue
  utilities={["row", "row-span", "row-start", "row-end"]}
  variable="rows"
  name="grid row size and location"
  value="span_16_/_span_16"
/>

### Responsive design

<ResponsiveDesign
  properties={["grid-row", "grid-row-start", "grid-row-end"]}
  defaultClass="row-span-3"
  featuredClass="row-span-4"
/>