Interface GridProps

interface GridProps {
    gridArea?: ResponsiveValue<GridArea>;
    gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>;
    gridAutoFlow?: ResponsiveValue<GridAutoFlow>;
    gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>;
    gridColumn?: ResponsiveValue<GridColumn>;
    gridColumnEnd?: ResponsiveValue<GridColumnEnd>;
    gridColumnGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    gridColumnStart?: ResponsiveValue<GridColumnStart>;
    gridGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    gridRow?: ResponsiveValue<GridRow>;
    gridRowEnd?: ResponsiveValue<GridRowEnd>;
    gridRowGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    gridRowStart?: ResponsiveValue<GridRowStart>;
    gridTemplate?: ResponsiveValue<GridTemplate>;
    gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>;
    gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>;
    gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>;
}

Hierarchy (view full)

Properties

gridArea? gridAutoColumns? gridAutoFlow? gridAutoRows? gridColumn? gridColumnEnd? gridColumnGap? gridColumnStart? gridGap? gridRow? gridRowEnd? gridRowGap? gridRowStart? gridTemplate? gridTemplateAreas? gridTemplateColumns? gridTemplateRows?

Properties

Optional gridArea

gridArea?: ResponsiveValue<GridArea>

The CSS grid-areas property.

It specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

See

Mozilla Docs

Optional gridAutoColumns

gridAutoColumns?: ResponsiveValue<GridAutoColumns<0 | string & {}>>

The CSS grid-auto-columns property.

It specifies the size of an implicitly-created grid column track or pattern of tracks.

See

Mozilla Docs

Optional gridAutoFlow

gridAutoFlow?: ResponsiveValue<GridAutoFlow>

The CSS grid-auto-flow property

It controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

See

Mozilla Docs

Optional gridAutoRows

gridAutoRows?: ResponsiveValue<GridAutoRows<0 | string & {}>>

The CSS grid-auto-rows property.

It specifies the size of an implicitly-created grid row track or pattern of tracks.

See

Mozilla Docs

Optional gridColumn

gridColumn?: ResponsiveValue<GridColumn>

The CSS grid-column property.

It specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

See

Mozilla Docs

Optional gridColumnEnd

gridColumnEnd?: ResponsiveValue<GridColumnEnd>

The CSS grid-column property

It specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

See

Mozilla Docs

Optional gridColumnGap

gridColumnGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

The CSS grid-column-gap property.

It defines the size of the gap (gutter) between an element's columns.

See

Mozilla Docs

Optional gridColumnStart

gridColumnStart?: ResponsiveValue<GridColumnStart>

The CSS grid-column property.

It specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement

See

Mozilla Docs

Optional gridGap

gridGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

The CSS grid-gap property.

It defines the gaps (gutters) between rows and columns

See

Mozilla Docs

Optional gridRow

gridRow?: ResponsiveValue<GridRow>

The CSS grid-row property

It specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

See

Mozilla Docs

Optional gridRowEnd

gridRowEnd?: ResponsiveValue<GridRowEnd>

The CSS grid-row-end property

It specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

See

Mozilla Docs

Optional gridRowGap

gridRowGap?: ResponsiveValue<number | string & {} | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

The CSS grid-row-gap property.

It defines the size of the gap (gutter) between an element's grid rows.

See

Mozilla Docs

Optional gridRowStart

gridRowStart?: ResponsiveValue<GridRowStart>

The CSS grid-row-start property

It specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

See

Mozilla Docs

Optional gridTemplate

gridTemplate?: ResponsiveValue<GridTemplate>

The CSS grid-template property.

It is a shorthand property for defining grid columns, rows, and areas.

See

Mozilla Docs

Optional gridTemplateAreas

gridTemplateAreas?: ResponsiveValue<GridTemplateAreas>

The CSS grid-template-areas property.

See

Mozilla Docs

Optional gridTemplateColumns

gridTemplateColumns?: ResponsiveValue<GridTemplateColumns<0 | string & {}>>

The CSS grid-template-columns property

It defines the line names and track sizing functions of the grid columns.

See

Mozilla Docs

Optional gridTemplateRows

gridTemplateRows?: ResponsiveValue<GridTemplateRows<0 | string & {}>>

The CSS grid-template-rows property.

It defines the line names and track sizing functions of the grid rows.

See

Mozilla Docs

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc