Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Grid } from "@hua-labs/hua";

1
2
3
4
5
6

cols=2
1
2
3
4
cols=3
1
2
3
4
5
6
cols=4
1
2
3
4
5
6
7
8

gap="sm"
1
2
3
4
gap="md"
1
2
3
4
gap="lg"
1
2
3
4

1
2
3
4
5
6
7
8

cols1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 121Number of columns
gap"none" | "sm" | "md" | "lg" | "xl""md"Gap between grid items
gapX"none" | "sm" | "md" | "lg" | "xl"-Horizontal gap between items
gapY"none" | "sm" | "md" | "lg" | "xl"-Vertical gap between items
responsivebooleantrueEnable responsive column adjustment

docs:common.basicUsage
import { Grid } from '@hua-labs/hua';

<Grid cols={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>
Separate Gaps
// Separate horizontal/vertical gaps
<Grid cols={4} gapX="lg" gapY="sm">
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Grid>
Fixed Grid
// Fixed grid (disable responsive)
<Grid cols={6} responsive={false} gap="lg">
  <div>Fixed 6 columns</div>
</Grid>

  • •Semantic HTML: Uses CSS Grid for visual layout while maintaining semantic HTML structure and logical DOM order for assistive technologies.
  • •Keyboard Navigation: Interactive children within grid items follow natural tab order matching the visual grid flow.
  • •Responsive Reflow: Columns automatically adjust at smaller breakpoints to maintain a readable single-column layout on narrow screens.
ContainerStack