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>
);
};
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