ZGrid

CSS Grid container

Example

1

2

3

4

Import

import { ZGrid } from "zurto-ui";

Usage

import { ZGrid } from "zurto-ui";

function Example() {
  return (
    <ZGrid columns={3} gap={12}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </ZGrid>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | -------- | ------- | -------------------------- | ----------------- | | columns | number | string | 1 | Number of columns | | gap | number | 0 | Gap between items | | rowGap | number | - | Row gap (overrides gap) | | columnGap | number | - | Column gap (overrides gap) |

Accessibility

• ✅ Keyboard navigation support
• ✅ ARIA attributes included
• ✅ Screen reader friendly
• ✅ Focus management