Skip to content

Latest commit

 

History

History
58 lines (47 loc) · 2.06 KB

grid-auto-flow.mdx

File metadata and controls

58 lines (47 loc) · 2.06 KB

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:

{
01
02
03
04
05
} 
<!-- [!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>

Responsive design