import { Grid } from '@uhg-abyss/mobile';Space
Use the space prop to determine the amount of space between elements in the grid.
Span
Number
Regardless of viewport width, the span will remain the same for these columns. Change the span by using [column spans] of the parent container.
Percent
Regardless of viewport width, the span will remain the same for these columns. Change the span by using percentages of the parent container.
Grid Props
| Name | Type | Default | Description |
|---|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | The contents of the grid component | |
columns | number | undefined | 12 | The number of columns in the grid |
space | Space | undefined | '$semantic.spacing.sm' | Determines the amount of space between elements in the grid |
span | string | number | undefined | 12 | Handles the span size of the grid |
Grid.Col Props
| Name | Type | Description |
|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | The contents of the grid col component |
span | string | number | undefined | Handles the span size of the column |
Grid Classes
| Class Name | Description |
|---|---|
| abyss-grid-root | Grid root element |
Grid.Col Classes
| Class Name | Description |
|---|---|
| abyss-grid-col-root | Grid column element |