@bdt-component-library/grid

Grid component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryGrid from 'https://cdn.skypack.dev/@bdt-component-library/grid';
</script>

README

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