Grid

The Grid component is a layout element that creates a structured, responsive grid system for arranging content in rows and columns. It provides a flexible framework for designing complex layouts, ensuring consistent spacing and alignment. This component is essential for building organized, adaptive interfaces that maintain their structure across various screen sizes and devices.

Source @welcome-ui/grid

Grid

area

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | number & {} | ThemeProp<GridArea, Theme>

same as gridArea

autoColumns

0 | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | "max-content" | "min-content" | ThemeProp<GridAutoColumns<0 | (string & {})>, Theme>

same as gridAutoColumns

autoFlow

"row" | "column" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | string & {} | "dense" | ThemeProp<GridAutoFlow, Theme>

same as gridAutoFlow

autoRows

0 | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | "max-content" | "min-content" | ThemeProp<GridAutoRows<0 | (string & {})>, Theme>

same as gridAutoRows

column

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | number & {} | ThemeProp<GridColumn, Theme>

same as gridColumn

columnGap

string | number | true | symbol | {} | string & {} | ThemeProp<string | number | true | symbol | {} | (string & {}), Theme>

same as columnGap

gap

string | number | true | symbol | {} | string & {} | ThemeProp<string | number | true | symbol | {} | (string & {}), Theme>

same as gridGap

row

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | number & {} | ThemeProp<GridRow, Theme>

same as gridRow

rowGap

string | number | true | symbol | {} | string & {} | ThemeProp<string | number | true | symbol | {} | (string & {}), Theme>

same as gridRowGap

templateAreas

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | string & {} | "none" | ThemeProp<GridTemplateAreas, Theme>

same as gridTemplateAreas

templateColumns

string | number | true | symbol | {} | string & {} | ThemeProp<string | number | true | symbol | {} | (string & {}), Theme>

same as gridTemplateColumns

templateRows

string | number | true | symbol | {} | string & {} | ThemeProp<string | number | true | symbol | {} | (string & {}), Theme>

same as gridTemplateRows

Grid.Item

area

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | number & {} | ThemeProp<GridArea, Theme>

same as gridArea

column

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | string & {} | number & {} | ThemeProp<GridColumn, Theme>

same as gridColumn

row

true | ThemeProp<true, Theme>

same as gridRow