ContextQMD
Back to Tailwindcss

Grid Auto Flow

src/docs/grid-auto-flow.mdx

latest2.1 KB
Original Source

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" />