Skip to content
Home

Grid.Item

Info
Demos
Properties

Demo

Responsive span usage

Item A
Item B
Item C
Item D

Tab order horizontal

In this example, the order changes, so does the tab (key) order.

Code Editor
<Grid.Container rowGap columnGap columns={12}>
  <Grid.Item span={[1, 6]}>
    <Item>Left top</Item>
  </Grid.Item>
  <Grid.Item span={[7, 12]}>
    <Item>Right top</Item>
  </Grid.Item>
  <Grid.Item span={[1, 6]}>
    <Item>Left bottom</Item>
  </Grid.Item>
  <Grid.Item span={[7, 12]}>
    <Item>Right bottom</Item>
  </Grid.Item>
</Grid.Container>

Tab order vertical

In this example, the order changes, so does the tab (key) order.

Code Editor
<Grid.Container rowGap columnGap columns={12}>
  <Grid.Item span={[1, 6]}>
    <Item>Left top</Item>
  </Grid.Item>
  <Grid.Item span={[1, 6]}>
    <Item>Left bottom</Item>
  </Grid.Item>
  <Grid.Item span={[7, 12]}>
    <Item>Right top</Item>
  </Grid.Item>
  <Grid.Item span={[7, 12]}>
    <Item>Right bottom</Item>
  </Grid.Item>
</Grid.Container>