layouts

Grid

Advanced grid layouts made easy

Features

Dynamic cell repeating
Custom cell placement
Supports intrinsic and extrinsic grids

Links

Open in playground Open in Storybook View source ARIA design

Anatomy

import { Grid } from "@wonderflow/react-components";

export default () => {
  return (
    <Grid>
      <Grid.Item>1</Grid.Item>
      <Grid.Item>2</Grid.Item>
      <Grid.Item>3</Grid.Item>
    </Grid>
  );
};

tsx

API Reference

Grid

PROPERTY

TYPE

DEFAULT

columns

number

rows

number

rowGap

enum

0

columnGap

enum

0

filling

enum

fill

colMinWidth

string

10rem

rowMinHeight

string

1fr

Grid.Item

PROPERTY

TYPE

DEFAULT

fullWidth

boolean

false

column

string

row

string

Accessibility

Adheres to the list role requirements.

Keyboard interactions

It's important to keep in mind that if you put interactive and focusable elements inside the grid, you may create inconsistencies with keyboard navigation if you change the natural order of the items.

Taking the example above, where we change the order of the items, the grid will be read as a list, but the order of the items will be different. If you you put focusable elements inside like buttons, you create an inconsistency between the visual order and the navigation order.