@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. |