Skip to main content

GridCell

The DhlGridCell component is used to position elements within a DhlGridContainer by defining the number of columns the DhlGridCell spans from a given starting column.

Import

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

Code​

<DhlGridContainer>
  <DhlGridCell>Foo</DhlGridCell>
</DhlGridContainer>

Usage​

Defining Responsive Behaviour​

The number of columns that a DhlGridCell can span across can be specified for 4 viewports, at the following respective viewports:

To specify the number of columns for a DhlGridCell to span across for each viewport, the spanColumns prop is used.

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

Passing a single number value to spanColumns​

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

In the example below, a DhlGridContainer is used to hold a DhlGridCell. By default, the DhlGridContainer holds 12 columns.

Default Grid Cell​

By giving spanColumns a single value of 12, the DhlGridCell will therefore span across all 12 columns at every viewport.

Passing an array of values to spanColumns​

You can specify exactly how many columns a DhlGridCell should span for each viewport by supplying the spanColumns prop with an Array of numbers.

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

Responsive Grid Cell​

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

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

This will result in a DhlGridCell that spans across the following number of columns at each breakpoint:

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

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

Inheriting Grid Cell​

const responsiveColumns = [3, 6];

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

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

Defining the starting column of a DhlGridCell​

To define in which column the DhlGridCell should start, use the startColumn prop. The startColumn prop follows the same responsive mechanism as the spanColumns prop i.e. resposive behaviour can be set individually for each viewport by passing startColumn an Array or for all viewports by passing a single Number.

Start Column DhlGridCell​

For example, above is a single DhlGridCell within a DhlGridContainerw with the following properties:

  • At the small viewport, the DhlGridCell spans across all 12 (default number of columns) columns of the DhlGridContainer.

  • At the remaining viewports, the DhlGridCell spans across 4 columns.

  • At the small viewport, the DhlGridCell starts at column 2.

  • At the remaining viewports, the DhlGridCell starts at column 9 and spans for 4 columns.

Overflow can be hidden by setting the isOverflowHidden prop to true.

Example use-cases​

The example use-case below uses three DhlGridCell wrapped Button's that span responsively - taking the full 12 columns at the smallest viewport to simulate a stack display. All remaining viewports span 6 columns. The gap between rows has been set to 40px. The DhlGridContainer holds DhlGridCell.

<DhlGridContainer>
  <DhlGridCell spanColumns={[12, 6]}>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
  <DhlGridCell spanColumns={[12, 6]}>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
  <DhlGridCell spanColumns={[12, 6]}>
    <!-- dhl-grid-cell content -->
  </DhlGridCell>
</DhlGridContainer>

Readme​

Properties​

PropertyAttributeDescriptionTypeDefault
dataClassNamedata-class-nameAn optional class name prop for the component.stringundefined
dataIddata-idAn optional prop. Gives a valid HTML ID attribute value for the component.stringdhl-grid-cell-${getRandomString()}
dataTestiddata-testidAn optional prop. The test id attached to the component as a data-testid attribute.stringundefined
isOverflowHiddenis-overflow-hiddenAn optional flag to configure overflow displaybooleanundefined
spanColumnsspan-columnsAn 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 viewport If specified as array, the values are used for the viewport in the following order:\ 0 = small.\ 1 = medium,\ 2 = large viewport,\ 3 = xlarge viewport.\ Use "unset" in larger viewport to ignore settings from smaller viewportnumber \| number[] \| string \| string[]undefined
startColumnstart-columnAn optional prop that sets the position of the cell by specifying at what grid column the cell should be displayed.\ Please note: Value can be of type number or array.\ If specified as number, the value is used for all viewport If specified as array, the values are used for the viewport in the following order:\ 0 = small.\ 1 = medium,\ 2 = large viewport,\ 3 = xlarge viewport.\ Use "unset" in larger viewport to ignore settings from smaller viewportnumber \| number[] \| string \| string[]undefined

Slots​

SlotDescription
"unnamed"unnamed children slot for GridCell content

Dependencies​

Used by​

Graph​

Built by DHL User Interface Library Team!