npm package: @pridgey/ui-gridcontainer
Description: A react component that aligns contained children in a CSS Grid
Author: Taylor Pridgen
Latest version: 2.2.1

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