Skip to content

Import

import { Grid } from '@dnb/eufemia'

Description

To make it easier to build responsive application layouts in line with defined design sketches, there are a number of components for layout.

  • Grid.Container is a layout system for CSS grid based layout of contents.

  • Grid.Item is a layout system for CSS grid based layout of contents.

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>,
)

You can find more related information in the Layout pages.

Columns

UX designers are using a 12 column system, along with a 4 and 6 column system, during their design processes.

Here is an example of how to use this Grid component for a page layout.

Demos

Responsive Grid.Container

Item A
Item B
Item C
Item D