Grid
The Grid component can be used to layout its children with the help of CSS
Grid. The component can be customized with CSS grid props.
More information about CSS Grid.
Import
import { Grid } from '@dynatrace/strato-components-preview/layouts-core';
Use cases
Grid props
In the example below the gridTemplateColumns prop is used. The same approach
can be used for other CSS grid properties.
Grid item
The prop gridItem can be set on any Grid component to mark it as a child of
another Grid component. When a Grid component is set to gridItem,
properties for CSS grid items can be used on that component.
Props
GridProps
Signature:
export declare type GridProps<E extends > = <E, >;GridOwnProps
Signature:
export declare type GridOwnProps = & & & ;FlexItemProps
Signature:
export declare type FlexItemProps = ;FlexItemCSS
Signature:
export declare type FlexItemCSS = <, | | | | | >;GridItemProps
Signature:
export declare type GridItemProps = ;GridItemCSS
Signature:
export declare type GridItemCSS = <, | | | | | | | | | >;GridContainerProps
Signature:
export declare type GridContainerProps = & {
gap?: ;
};GridContainerCSS
Signature:
export declare type GridContainerCSS = <, | | | | | | | | | | | | | | | | | | | >;LayoutProps
extends
, , , PaddingProps
| Name | Type | Default | Description |
|---|---|---|---|
padding? | 8 | ||
p? | - | ||
paddingX? | - | ||
px? | - | ||
paddingY? | - | ||
py? | - | ||
paddingTop? | - | ||
pt? | - | ||
paddingRight? | - | ||
pr? | - | ||
paddingBottom? | - | ||
pb? | - | ||
paddingLeft? | - | ||
pl? | - |
MarginProps
| Name | Type | Default | Description |
|---|---|---|---|
margin? | 0 | ||
m? | - | ||
marginX? | - | ||
mx? | - | ||
marginY? | - | ||
my? | - | ||
marginTop? | - | ||
mt? | - | ||
marginRight? | - | ||
mr? | - | ||
marginBottom? | - | ||
mb? | - | ||
marginLeft? | - | ||
ml? | - |
LayoutSizeCSS
Signature:
export declare type LayoutSizeCSS = <, | | | | | >;Still have questions?
Find answers in the Dynatrace Community