# media-grid

- 分组：高级 / 可选能力（Advanced / Optional）
- 页面：/components/media-grid
- 源码：packages/react/src/components/media-grid.tsx

## 导出

```ts
import { MediaGrid } from "@modra/react";
```

## Props（MediaGridProps）

| 名称 | 必填 | 类型 | 说明 |
| --- | --- | --- | --- |
| `items` | 是 | `readonly MediaGridItem[]` |  |
| `minItemWidth` | 否 | `string` | Minimum tile width as a CSS length; tiles stretch to fill the row. |
| `aspectRatio` | 否 | `number \| string` | Thumbnail aspect ratio as width / height, or a CSS `aspect-ratio` value. Defaults to 1. |
| `fit` | 否 | `"cover" \| "contain"` |  |
| `selectionMode` | 否 | `"none" \| "multiple"` |  |
| `selectedIds` | 否 | `readonly string[]` |  |
| `defaultSelectedIds` | 否 | `readonly string[]` |  |
| `onSelectedIdsChange` | 否 | `(ids: string[]) => void` |  |
| `onItemClick` | 否 | `(item: MediaGridItem, index: number) => void` | Called when a tile is activated with click or Enter. |
| `itemActions` | 否 | `(item: MediaGridItem, index: number) => React.ReactNode` | Hover/focus toolbar in the bottom-end corner of each tile. Always visible on touch devices. |
| `loading` | 否 | `boolean` | Show placeholder tiles instead of items. |
| `skeletonCount` | 否 | `number` |  |
| `empty` | 否 | `React.ReactNode` | Rendered when there are no items and `loading` is false. |