Components
Grid
SketchGrid — a responsive hand-drawn grid layout.
SketchGrid arranges children into a responsive CSS grid that collapses columns
on narrow screens without media queries. Pair it with SketchCard or any other
block-level children.
Default
import { SketchGrid, SketchCard } from "blackchalk";<SketchGrid><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 1</SketchCard><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 2</SketchCard><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 3</SketchCard></SketchGrid>Four columns
import { SketchGrid, SketchCard } from "blackchalk";<SketchGrid columns={4} gap={24}><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 1</SketchCard><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 2</SketchCard><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 3</SketchCard><SketchCard style={{ padding: 24, textAlign: "center" }}>Item 4</SketchCard></SketchGrid>Props
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
columns | number | 3 |
gap | number | 16 |
minColWidth | number | Math.max(120, 880/columns) |
See it in the Storybook playground, or read the source.