Grid
<ts-grid> vv0.4.0
The ts-grid component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-grid align="stretch" columns="auto" gap="4">Content</ts-grid>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
align | align | "center" | "end" | "start" | "stretch" | 'stretch' | Vertical alignment of grid items. |
columns | columns | string | 'auto' | Number of columns or ‘auto’ for responsive auto-fill. |
gap | gap | string | '4' | Spacing token number for gap between items. |
minColumnWidth | min-column-width | string | '280px' | Minimum column width when columns is ‘auto’. |
| Name | Description |
|---|---|
*(default)* | Default slot for grid items. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
base | The grid container. |
ts-grid::part(base) { /* your custom styles */}<ts-grid align="stretch" columns="auto" gap="4">Content</ts-grid>import { TsGrid } from '@tessera-ui/react';
<TsGrid align="stretch" columns="auto">Content</TsGrid>