@pridgey/ui-gridcontainer
TypeScript icon, indicating that this package has built-in type declarations

2.2.1 • Public • Published

@pridgey/ui-gridcontainer

The GridContainer component contains items in a CSS Grid container.

Basic Usage

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

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.

Dependencies (3)

Dev Dependencies (4)

Package Sidebar

Install

npm i @pridgey/ui-gridcontainer

Weekly Downloads

0

Version

2.2.1

License

MIT

Unpacked Size

16.4 kB

Total Files

23

Last publish

Collaborators

  • pridgey