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 |