GridArea
Component | Source Code
extends ComponentPropsWithRef<“div”>
Props Inheritance Hierarchy: ComponentPropsWithRef<“div”>
Used in conjunction with Grid. Allows you to easily outline the areas of your grid.
Properties
Section titled “Properties”column?: string
Section titled “column?: string”Shorthand for grid-column, this allows
you to specify the space you’d like this area to be in when using flow in your Grid. Note that
specifying this will have no impact if you’re using layout options in your Grid that describe
fixed areas. If using fixed areas, use the name prop instead to name this GridArea to match the name
you defined in layout.
This follows the same syntax as the grid-column CSS rule.
Mutually exclusive with name.
name?: string
Section titled “name?: string”The name of this grid area. This must correspond exactly with the
name you used when defining the parent Grid’s layout.
Mutually exclusive with row and column.
row?: string
Section titled “row?: string”Shorthand for grid-row, this allows
you to specify the space you’d like this area to be in when using flow in your Grid. Note that
specifying this will have no impact if you’re using layout options in your Grid that describe
fixed areas. If using fixed areas, use the name prop instead to name this GridArea to match the name
you defined in layout.
This follows the same syntax as the grid-row CSS rule.
Mutually exclusive with name.