Skip to content
Home

Grid.Container

Info
Demos
Properties

Demos

Responsive grid usage

Item A
Item B
Item C
Item D

Custom columns

When medium CSS Grid is disabled by using false.

Item A
Item B
Item C
Item D
Code Editor
<Grid.Container
  columns={{
    small: 4,
    medium: false,
  }}
  // columns={12} // only 12
  rowGap
  columnGap
>
  <Grid.Item
    span={{
      small: 'full',
      large: [1, 12],
    }}
    style={colors[0]}
    element={TestElement}
  >
    Item A
  </Grid.Item>

  <Grid.Item
    span={{
      small: [1, 'end'],
      large: [1, 6],
    }}
    style={colors[1]}
    element={TestElement}
  >
    Item B
  </Grid.Item>

  <Grid.Item
    span={{
      small: [1, 2],
      large: [7, 'end'],
    }}
    style={colors[2]}
    element={TestElement}
  >
    Item C
  </Grid.Item>

  <Grid.Item
    span={{
      small: [3, 4],
      large: 'full',
    }}
    style={colors[3]}
    element={TestElement}
  >
    Item D
  </Grid.Item>
</Grid.Container>