FlexGrid
A layout component that automatically wraps children when they don’t fit, with consistent spacing control.
Install Dependencies
npx quickcode-ui add FlexGridExamples
Default
Basic Usage
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Alignment
With Alignment
Small
Medium
Regular
Large
Custom Row and Column Gap
Separate Row & Column Gaps
1
2
3
4
5
6
7
8
9
10
11
12
Props
| Prop | Type | Default | Description |
|---|---|---|---|
gap | string | '2' | Spacing between all children (Tailwind spacing scale) |
rowGap | string | undefined | Vertical spacing between rows |
columnGap | string | undefined | Horizontal spacing between columns |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | undefined | Alignment of children along the cross axis |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | undefined | Alignment of children along the main axis |
className | string | undefined | Additional CSS classes |
Last updated on