# PhotoGrid

給 Docusaurus 用的瀑布流照片牆元件。像 Instagram grid，但圖片會保持原始比例。

- 電腦三欄、平板兩欄、手機一欄
- 點擊圖片直接在新視窗開啟原圖
- 加圖只要在陣列多寫一行路徑，不用碰元件

## 預覽效果

| 桌面 (3 欄) | 手機 (1 欄) |
|---|---|
| 瀑布流排列，圖片保持原始比例 | 單欄垂直排列 |

## 安裝

把 `PhotoGrid.jsx` 複製到你的 Docusaurus 專案：

```
src/
  components/
    PhotoGrid.jsx   ← 放這裡
```

不需要額外裝任何套件。

## 使用方式

### 1. 把圖片丟進 static 資料夾

```
static/
  img/
    gallery/
      photo-01.jpg
      photo-02.webp
      photo-03.png
```

### 2. 建立一個 MDX 頁面

在 `src/pages/crepe.mdx` 底下建立頁面：

```mdx
---
title: ᓚᘏᗢ
hide_table_of_contents: true
---

import PhotoGrid from "@site/src/components/PhotoGrid";

# Gallery

<PhotoGrid
  photos={[
    "/img/gallery/photo-01.jpg",
    "/img/gallery/photo-02.webp",
    "/img/gallery/photo-03.png",
  ]}
/>
```

未來加圖就是在 `photos` 陣列多塞一行，就這樣，沒了。

## Props

| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| `photos` | `string[]` | `[]` | 圖片路徑陣列，相對於 `/static` |
| `columns` | `number` | `3` | 桌面版欄數 |
| `gap` | `string` | `"12px"` | 圖片間距 |
| `shuffle` | `boolean` | `false` | 每次載入隨機排列順序 |

```mdx
<!-- 想要兩欄、大間距 -->
<PhotoGrid photos={[...]} columns={2} gap="20px" />
```

## RWD 斷點

| 螢幕寬度 | 欄數 |
|---|---|
| > 1024px | `columns` 設定值（預設 3） |
| 769–1024px | 2 |
| ≤ 768px | 1 |