Usage
import { Grid } from 'nr1'
Examples
Props
Grid items to display.
Up to 12 items are allowed.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
Expands the grid to occupy all available height.
Expands the grid to occupy all available width.
Grid .GAP_TYPE .MEDIUM
Size of the gap between columns and rows.
<One ofGrid.GAP_TYPE.MEDIUM,Grid.GAP_TYPE.SMALL,>
Spacing property. Spacing is defined as a tuple of zero to four
values, which follow the same conventions as CSS properties like
margin
or padding
. To omit a value, use SPACING_TYPE.OMIT
.
<Array of<One ofGrid.SPACING_TYPE.EXTRA_LARGE,Grid.SPACING_TYPE.LARGE,Grid.SPACING_TYPE.MEDIUM,Grid.SPACING_TYPE.NONE,Grid.SPACING_TYPE.OMIT,Grid.SPACING_TYPE.SMALL,>
>
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
Adds a data-test-id
attribute. Use it to target the component in unit and
E2E tests.
For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.
For example, my-nerdpack.some-element
.
Note: You might not see data-test-id
attributes as they are removed
from the DOM, to debug them pass a e2e-test
query parameter to the URL.