#Grid.Item

#Import

import { Grid } from '@dnb/eufemia'

#Description

Grid.Item is a building block for CSS grid based layout of contents and components. Should be used in combination with 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

#Span

You need to provide a span property with a number from 1 to 12 (can be changed in Grid.Container with the columns property).

The span will be used to specify where the item is placed in the grid columns.

A span needs always two numbers – from and to.

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

Example of spans:

• span={[1, 'end']}
• span={{ small: [1, 4], medium: [1, 6], large: [1, 12]}}

#Responsive spans

You can also make spans respond to media queries.

For doing so, provide a span property with an object containing Media Query types. Each media size should contain a span, like mentioned above.

<Grid.Container>
  <Grid.Item
    span={{
      small: [1, 12],
      large: [1, 6],
    }}
  >
    uses 50% or 100% based on the screen size
  </Grid.Item>
  <Grid.Item
    span={{
      small: [1, 12],
      large: [7, 12],
    }}
  >
    uses 50% or 100% based on the screen size
  </Grid.Item>
</Grid.Container>