RUI.next

Navigation-Layout
Grid

Grid

Grid is a wrap of item boxes.

The Grid component uses the CSS Grid feature, so the compatibility standard is iOS Safari >= 10.3 and Chrome >= 57.

<Grid>
  <Grid.Item><PlaceHolder /></Grid.Item>
</Grid>
<Grid>
  <Grid.Item><PlaceHolder /></Grid.Item>
</Grid>

Example

Basic usage of Grid component.

Grid with item Span
Block
Block
Block
Block
Block

API

Grid

PropertiesDescriptionTypeDefault
columnsThe number of columnsnumber-
gapThe spacing between gridsnumber | string | [number | string, number | string]0

Grid.Item

PropertiesDescriptionTypeDefault
spanThe item spannumber1
onClickThe click event(event: React.MouseEvent) => void-