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

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

export const title = "grid-auto-flow";
export const description = "Utilities for controlling how elements in a grid are auto-placed.";

<ApiTable
  rows={[
    ["grid-flow-row", "grid-auto-flow: row;"],
    ["grid-flow-col", "grid-auto-flow: column;"],
    ["grid-flow-dense", "grid-auto-flow: dense;"],
    ["grid-flow-row-dense", "grid-auto-flow: row dense;"],
    ["grid-flow-col-dense", "grid-auto-flow: column dense;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `grid-flow-col` and `grid-flow-row-dense` to control how the auto-placement algorithm works for a grid layout:

<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-row-dense grid-cols-3 grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="col-span-2 rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">01</div>
        <div className="col-span-2 rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">02</div>
        <div className="rounded-lg bg-purple-500 p-4">03</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">04</div>
        <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">05</div>
      </div>
    </div>
  }
</Example>

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

</Figure>

### Responsive design

<ResponsiveDesign property="grid-auto-flow" defaultClass="grid grid-flow-col" featuredClass="grid-flow-row" />