Skip to content

Import

import { Grid } from '@dnb/eufemia'

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.