Skip to main content

    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.

    OverviewProperties

    GridProps

    Signature:

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

    GridOwnProps

    Signature:

    export declare type GridOwnProps = & & & & ;

    GridFlexPositionProps

    NameTypeDefaultDescription
    justifySelf?
    		-

    justify self positions

    alignSelf?
    		-

    align self positions

    placeSelf?
    		-

    place self positions

    justifyItems?
    		-

    justify items positions

    alignItems?
    		-

    align items positions

    placeItems?
    		-

    place items positions

    justifyContent?
    		-

    justify content positions

    alignContent?
    		-

    align content positions

    placeContent?
    		-

    place content positions

    GapProps

    NameTypeDefaultDescription
    gap?
    		-

    Defines gap

    rowGap?
    		-

    Defines row gap

    columnGap?
    		-

    Defines column gap

    LayoutSizeProps

    NameTypeDefaultDescription
    width?
    []
    		-

    CSS width property

    minWidth?
    []
    		-

    CSS min width property

    maxWidth?
    []
    		-

    CSS max width property

    height?
    []
    		-

    CSS height property

    minHeight?
    []
    		-

    CSS min height property

    maxHeight?
    []
    		-

    CSS max height property

    SpacingProps

    NameTypeDefaultDescription
    padding?
    		-

    Defines CSS padding property

    p?
    		-

    Defines CSS padding property

    paddingX?
    		-

    Defines CSS x padding property

    px?
    		-

    Defines CSS x padding property

    paddingY?
    		-

    Defines CSS y padding property

    py?
    		-

    Defines CSS y padding property

    paddingTop?
    		-

    Defines CSS top padding property

    pt?
    		-

    Defines CSS top padding property

    paddingRight?
    		-

    Defines CSS right padding property

    pr?
    		-

    Defines CSS right padding property

    paddingBottom?
    		-

    Defines CSS bottom padding property

    pb?
    		-

    Defines CSS bottom padding property

    paddingLeft?
    		-

    Defines CSS left padding property

    pl?
    		-

    Defines CSS left padding property

    margin?
    		-

    Defines CSS margin property

    m?
    		-

    Defines CSS margin property

    marginX?
    		-

    Defines CSS x margin property

    mx?
    		-

    Defines CSS x margin property

    marginY?
    		-

    Defines CSS y margin property

    my?
    		-

    Definesy CSS margin property

    marginTop?
    		-

    Defines CSS top margin property

    mt?
    		-

    Defines CSS top margin property

    marginRight?
    		-

    Defines CSS right margin property

    mr?
    		-

    Defines CSS right margin property

    marginBottom?
    		-

    Defines CSS bottom margin property

    mb?
    		-

    Defines bottom margin property

    marginLeft?
    		-

    Defines CSS left margin property

    ml?
    		-

    Defines CSS left margin property

    GridItemStyleProps

    NameTypeDefaultDescription
    gridItem?
    		-

    Determines whether this is a grid item. If true, display: 'grid' style will not be added.

    GridStyleProps

    extends, , , ,
    NameTypeDefaultDescription
    order?
    .[]
    		-

    Defines order

    flexGrow?
    .[]
    		-

    Defines flex grow

    flexShrink?
    .[]
    		-

    Defines flex shrink

    flexBasis?
    .[]
    		-

    Defines flex basis

    flex?
    .[]
    		-

    Defines flex

    gridTemplateColumns?
    .[]
    		-

    Defines grid template columns

    gridTemplateRows?
    .[]
    		-

    Defines grid template rows

    gridTemplateAreas?
    .[]
    		-

    Defines grid template areas

    gridTemplate?
    .[]
    		-

    Defines grid template

    gridAutoColumns?
    .[]
    		-

    Defines grid auto columns

    gridAutoRows?
    .[]
    		-

    Defines grid auto rows

    gridAutoFlow?
    .[]
    		-

    Defines grid auto flow

    grid?
    .[]
    		-

    Defines grid

    gridColumnStart?
    .[]
    		-

    Defines grid column start

    gridColumnEnd?
    .[]
    		-

    Defines grid column end

    gridRowStart?
    .[]
    		-

    Defines grid row start

    gridRowEnd?
    .[]
    		-

    Defines grid row end

    gridColumn?
    .[]
    		-

    Defines grid column

    gridRow?
    .[]
    		-

    Defines grid row

    gridArea?
    .[]
    		-

    Defines grid area

    Still have questions?
    Find answers in the Dynatrace Community