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

import { ApiTable } from "@/components/api-table.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "grid-auto-rows";
export const description = "Utilities for controlling the size of implicitly-created grid rows.";

<ApiTable
  rows={[
    ["auto-rows-auto", "grid-auto-rows: auto;"],
    ["auto-rows-min", "grid-auto-rows: min-content;"],
    ["auto-rows-max", "grid-auto-rows: max-content;"],
    ["auto-rows-fr", "grid-auto-rows: minmax(0, 1fr);"],
    ["auto-rows-(<custom-property>)", "grid-auto-rows: var(<custom-property>);"],
    ["auto-rows-[<value>]", "grid-auto-rows: <value>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `auto-rows-min` and `auto-rows-max` to control the size of implicitly-created grid rows:

```html
<!-- [!code classes:auto-rows-max] -->
<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

### Using a custom value

<UsingACustomValue utility="auto-rows" name="size of implicitly-created grid rows" value="minmax(0,2fr)" />

### Responsive design

<ResponsiveDesign
  property="grid-auto-rows"
  defaultClass="grid grid-flow-row auto-rows-max"
  featuredClass="auto-rows-min"
/>