#Grid.Container

#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

<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.