Skip to content
Home

GridContainer

Info
Demos
Properties

Description

Layout.GridContainer is a building block for CSS grid based layouts.

Use Layout.GridItem for you inner wrappers so you can apply a span to them.

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
<Layout.GridContainer>
  <Layout.GridItem span={[1, 6]}>uses 50% in width</Layout.GridItem>
  <Layout.GridItem span={[7, 12]}>uses 50% in width</Layout.GridItem>
</Layout.GridContainer>

Gap

By default is no gap given.

Imports and aliases

import { Layout } from '@dnb/eufemia'


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

For shortening the import name, you can use:

import { Layout } from '@dnb/eufemia'


// Method 1
const Grid = Layout.Grid
const Item = Layout.Grid.Item


// Method 2
const { GridContainer: Grid, GridItem: Item } = Layout


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

Demos

Responsive grid usage

Item A
Item B
Item C
Item D
Code Editor
<Grid rowGap columnGap>
  <Item
    span={{
      small: [1, 2],
      medium: [1, 3],
      large: [1, 12],
    }}
    style={colors[0]}
    element={TestElement}
  >
    Item A
  </Item>

  <Item
    span={{
      small: [3, 4],
      medium: [4, 6],
      large: [1, 4],
    }}
    style={colors[1]}
    element={TestElement}
  >
    Item B
  </Item>

  <Item
    span={{
      small: [2, 3],
      medium: [4, 6],
      large: [5, 8],
    }}
    style={colors[2]}
    element={TestElement}
  >
    Item C
  </Item>

  <Item
    span={{
      small: [1, 4],
      medium: [4, 6],
      large: [9, 12],
    }}
    style={colors[3]}
    element={TestElement}
  >
    Item D
  </Item>
</Grid>

Custom columns

When medium CSS Grid is disabled by using false.

Item A
Item B
Item C
Item D
Code Editor
<Grid
  columns={{
    small: 4,
    medium: false,
  }}
  // columns={12} // only 12
  rowGap
  columnGap
>
  <Item
    span={{
      small: 'full',
      large: [1, 12],
    }}
    style={colors[0]}
    element={TestElement}
  >
    Item A
  </Item>

  <Item
    span={{
      small: [1, 'end'],
      large: [1, 6],
    }}
    style={colors[1]}
    element={TestElement}
  >
    Item B
  </Item>

  <Item
    span={{
      small: [1, 2],
      large: [7, 'end'],
    }}
    style={colors[2]}
    element={TestElement}
  >
    Item C
  </Item>

  <Item
    span={{
      small: [3, 4],
      large: 'full',
    }}
    style={colors[3]}
    element={TestElement}
  >
    Item D
  </Item>
</Grid>