@pridgey/ui-gridcontainer
The GridContainer component contains items in a CSS Grid container.
Basic Usage
<GridContainer>
<div>one</div>
<div>two</div>
<div>three</div>
</GridContainer>
GridContainerProps
Prop Name | Type | Description |
---|---|---|
children | React.ReactChild[] | The children to wrap in the grid container. |
Rows? | number or string | The rows configuration. If a number it will create that many equal height rows. |
Columns? | number or string | The columns configuration. If a number it will create that many equal width columns. |
Areas? | string[] | The grid-areas configuration. Each index of the array is representative of a row. |
AlignItems? | Accepts a single string: "stretch", "center", "flex-start", "flex-end", "baseline" or an object with Desktop and Mobile option: { Desktop: "center", Mobile: "flex-end" }. | The alignment of the items in the grid container. Defaults to "center". |
JustifyItems? | Accepts a single string: "stretch", "center", "flex-start", "flex-end", "baseline" or an object with Desktop and Mobile option: { Desktop: "space-between", Mobile: "center" }. | The justification of items in the grid container. Defaults to "center". |
ColumnAndRowGap? | number or string | The amount of spacing between columns and rows. |
ColumnGap? | number or string | The amount of spacing between columns. |
RowGap? | number or string | The amount of spacing between rows. |
Margin? | number or string | The amount of margin of the grid container. |
Padding? | number or string | The amount of padding in the grid container. |
Width? | number or string | The width of the grid container. |
Height? | number or string | The height of the grid container. |