v14.0.8


layouts

Grid

Advanced grid layouts made easy

Features

  • Dynamic cell repeating
  • Custom cell placement
  • Supports intrinsic and extrinsic grids
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024