GridContainer

The DhlGridContainer component is used to create a container with a specified number of columns. This component can be used in conjunction with the DhlGridCell to easily position elements on the grid.

Import

React

// with @dhl-official/react-library:
import { DhlGridContainer } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlGridContainer } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-grid-container></dhl-grid-container>

Vue.js

// with @dhl-official/vue-library:
import { DhlGridContainer } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlGridContainer } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlGridContainer>
  /* Grid Children... */
</DhlGridContainer>

Angular

<dhl-grid-container>
  /* Grid Children... */
</dhl-grid-container>

Vue.js

<dhl-grid-container>
  /* Grid Children... */
</dhl-grid-container>

Usage

Defining Responsive Behaviour

The number of columns can be specified for 4 viewports, at the following respective viewports:

• small: 320px (20rem)
• medium: 768px (48rem)
• large: 1024px (64rem)
• xlarge: 1365px (85.312rem)

To specify the number of columns for each viewport, the columns prop is used.

The columns prop can take either an Array type or a Number type.

Passing a single number value to columns

Supplying the columns prop with a single Number will result in an equal amount of columns across ALL of the previously mentioned viewports.

By default, the DhlGridContainer creates 12 columns.

Default Grid Container

Passing an array of values to columns

You can specify exactly how many columns DhlGridContainer should have for each viewport by supplying the columns prop with an Array.

The index of the array maps to the previously defined viewport breakpoints.

Responsive Grid Container

const responsiveColumns = [3, 6, 8, 12];

<DhlGridContainer columns={responsiveColumns}>
  {/* Grid Children... */}
</DhlGridContainer>;

This will result in a DhlGridContainer with the following number of columns at each breakpoint:

• small: 3 columns
• medium: 6 columns
• large: 8 columns
• xlarge: 12 columns

If an array is specified, but values are not provided for all viewports, then the number of columns will be inherited from the last specified viewport.

Inheriting Grid Container

const responsiveColumns = [3, 6];

<DhlGridContainer columns={responsiveColumns}>
  {/* Grid Children... */}
</DhlGridContainer>;

This will result in a DhlGridContainer with the following number of columns at each breakpoint:

• small: 3 columns
• medium: 6 columns
• large: 6 columns
• xlarge: 6 columns

To prevent this behaviour, you can pass unset as a value in the array for any viewport.

Handling off-grid components

To handle off-grid components, you can set the fullWidth prop to true. This removes all horizontal padding but ensures that the off-grid components still adhere to the max-width defined in DSM.

Example use-cases

The example use-case below creates a DhlGridContainer that takes the full width of its parent container. The gap between rows has been set to var(--dui-size-space-20x). The DhlGridContainer holds DhlGridCell.

<DhlGridContainer
  columns={[6, 12]}
  isFullWidth
  rowGap="var(--dui-size-space-20x)"
>
  <DhlGridCell>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
  <DhlGridCell>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
  <DhlGridCell>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
  <DhlGridCell>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
</DhlGridContainer>

Readme

Properties

Property	Attribute	Description	Type	Default
columns	columns	An optional prop that sets the number of grid columns Please note: Value can be of type number or array If specified as number, the value is used for all viewports If specified as array, the values are used for the viewports in the following order: 0 = small. 1 = medium, 2 = large viewport, 3 = xlarge viewport Use "unset" in larger viewports to ignore settings from smaller viewports	number \| number[] \| string \| string[]	12
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-grid-container-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
isFullWidth	is-full-width	An optional prop that sets the component to 100% width of it's parent container.	boolean	false
rowGap	row-gap	An optional prop that defines the gap between rows	string	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot intended for DhlGridCell component(s)

Dependencies

Used by

• dhl-copy-text
• dhl-footer
• dhl-page-headline
• dhl-stage
• dhl-stage-action-box
• dhl-stage-intro
• dhl-stage-numbers
• dhl-stage-tiles

Graph

---

Built by DHL User Interface Library Team!