1.3.5 • Published 4 years ago
@bdt-component-library/grid v1.3.5
Grid Component
About
This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.
Description
A basic Grid component structure built on top of flex-box from which we can build other types of layout/structure components and/or use to layout regular components.
API
| prop | type | required | default | explanation |
|---|---|---|---|---|
| children | React node | yes | n/a | The component to receive the grid layout effects |
| alignItems | enum("items-start", "items-end", "items-center", "items-baseline", "items-stretch") | no | n/a | Determines the align-items flexbox attribute |
| className | string | no | n/a | Adds an optional classname to the main component |
| direction | enum("row", "column") | no | "row" | Determines the directional layout inside the grid |
| justifyContent | enum("justify-start", "justify-end", "jsutify-center", "justify-between", "justify-around", "justify-evenly") | no | n/a | Determines the justify-content flexbox attribute |
| spacing | enum(0, 1, 2, 3, 4) | no | 1 | Determines the spacing between children passed into the Grid component (0 means no spacing) |
| wrap | enum("wrap", "no-wrap") | no | "wrap" | Determines if flex-wrap attribute is applied |