@pridgey/ui-gridcontainer NPM

`@pridgey/ui-gridcontainer`

The GridContainer component contains items in a CSS Grid container.

<GridContainer>
  <div>one</div>
  <div>two</div>
  <div>three</div>
</GridContainer>

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.

4 years ago

4 years ago