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 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.
Demos
Responsive Grid.Container
Item A
Item B
Item C
Item D
Code Editor
<Grid.Container rowGap columnGap> <Grid.Item span={{ small: [1, 2], medium: [1, 3], large: [1, 12], }} style={colors[0]} element={TestElement} > Item A </Grid.Item> <Grid.Item span={{ small: [3, 4], medium: [4, 6], large: [1, 4], }} style={colors[1]} element={TestElement} > Item B </Grid.Item> <Grid.Item span={{ small: [2, 3], medium: [4, 6], large: [5, 8], }} style={colors[2]} element={TestElement} > Item C </Grid.Item> <Grid.Item span={{ small: [1, 4], medium: [4, 6], large: [9, 12], }} style={colors[3]} element={TestElement} > Item D </Grid.Item> </Grid.Container>