Columns

The Columns component can be used to wrap Column components to create a simple layout Per default, the width of each column is the same and a column gap of 8 px is used.

Import

import {
  Columns,
  Column,
} from '@dynatrace/strato-components-preview/layouts-core';

Use cases

CodeSandbox

Customize column width and gap

The width of a column can be customized with the width prop. The gap between each of the columns can be set with the gap prop of the Columns component.

CodeSandbox

Props

ColumnProps

Signature:

export declare type ColumnProps<E extends > = <E, >;

ColumnOwnProps

extends,

ColumnItemProps

extends,

Name	Type	Default	Description
width?		-	Width of the column, which can either be set to spread the whole content, or to a predefined column fraction.

ColumnsProps

Signature:

export declare type ColumnsProps<E extends > = <E, >;

ColumnsOwnProps

extends,

ColumnsContainerProps

extends,

Name	Type	Default	Description
gap?		8	Gap between each of the children.