# @pridgey/ui-gridcontainer > A react component that aligns contained children in a CSS Grid Latest version **2.2.1** (published 2020-10-08) · MIT license · 0 weekly downloads ## Install ```sh npm install @pridgey/ui-gridcontainer pnpm add @pridgey/ui-gridcontainer yarn add @pridgey/ui-gridcontainer bun add @pridgey/ui-gridcontainer ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.1 | | Published | 2020-10-08 | | First published | 2020-10-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 16 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Taylor Pridgen | | Maintainers | pridgey | ## Links - npm: https://www.npmjs.com/package/@pridgey/ui-gridcontainer - Repository: https://github.com/pridgey/pridgey-ui - Homepage: https://github.com/pridgey/pridgey-ui#readme - Issues: https://github.com/pridgey/pridgey-ui/issues - npm.io page: https://npm.io/package/@pridgey/ui-gridcontainer ## Dependencies (3) - [react](https://npm.io/package/react.md) 16.13.1 - [react-dom](https://npm.io/package/react-dom.md) 16.13.1 - [styled-components](https://npm.io/package/styled-components.md) 5.2.0 ## Recent versions - 2.2.1 (latest) — 2020-10-08 - 2.2.0 — 2020-10-08 ## README # `@pridgey/ui-gridcontainer` The GridContainer component contains items in a CSS Grid container. ### Basic Usage ```
one
two
three
 ``` ### 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. | --- _Source: https://npm.io/package/@pridgey/ui-gridcontainer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._