Demo
Responsive span usage
Item A
Item B
Item C
Item D
Code Editor
<Grid.Container rowGap columnGap> <Grid.Item span={{ small: [1, 2], medium: [1, 3], large: [1, 12], }} style={colors[0]} element={TestElement} > Item A </Grid.Item> <Grid.Item span={{ small: [3, 4], medium: [4, 6], large: [1, 4], }} style={colors[1]} element={TestElement} > Item B </Grid.Item> <Grid.Item span={{ small: [2, 3], medium: [4, 6], large: [5, 8], }} style={colors[2]} element={TestElement} > Item C </Grid.Item> <Grid.Item span={{ small: [1, 4], medium: [4, 6], large: [9, 12], }} style={colors[3]} element={TestElement} > Item D </Grid.Item> </Grid.Container>
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>