docusaurus-photogrid/README.md

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 底下建立頁面：

---
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	每次載入隨機排列順序

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

RWD 斷點

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