Skip to content
Home

Grid.Container

Info
Demos
Properties

Description

Grid.Container is a building block for CSS grid based layouts.

Use Grid.Item for you inner wrappers so you can apply a span to them.

import { Grid } from '@dnb/eufemia'


render(
  <Grid.Container>
    <Grid.Item span={[1, 6]}>Item A</Grid.Item>
    <Grid.Item span={[7, 12]}>Item B</Grid.Item>
  </Grid.Container>,
)

The columns do change based on what breakpoint the browser is in:

  • 4 columns when small
  • 6 columns when medium
  • 12 columns when large
uses 50% in width
uses 50% in width
Code Editor
<Grid.Container>
  <Grid.Item span={[1, 6]}>uses 50% in width</Grid.Item>
  <Grid.Item span={[7, 12]}>uses 50% in width</Grid.Item>
</Grid.Container>

Gap

By default is no gap given.

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>