Grid設計理念

Grid排版觀念-1

在Grid排版的系統中，是基於行(row)以及(col)來定義資訊區塊的，大致的工作原理如下：

1. 通過row在水平方向建立一組column(col)
2. content應該放置於col內,且只有col可以作為row的直接元素（所有Col都必須放在Row內）
3. Grid排版中的row是以1到24的值來表示橫跨的範圍．比如四個等寬的列可以用
   <Col span={6}/>
   來創建
4. 如果一個row的col總和超過24，那多餘的col會另起一行排列．

Grid排版觀念-2

RWD(響應式)排版

1. 參照Bootstrap的響應式設計，預設6個響應尺寸：xs、sm、md、lg、xl、xxl
2. 可以根據不同斷點設計每行row要有幾個col，舉例來說
	  sm={{ span: 24 }} //在sm的尺寸下，一個row只會有一個(24/24)col
      md={{ span: 12 }} //在md的尺寸下，一個row會有兩個(24/12)col
      lg={{ span: 8 }} //在lg的尺寸下，一個row會有三個(24/8)col
      xl={{ span: 6 }} //在xl的尺寸下，一個row會有四個(24/6)col
3. Row的gutter屬性，以陣列形式：[水平間距,垂直間距]呈現，其中又推薦以(16+8n)px作為間隔大小，比如說
	 <Row gutter={[24, 32]}> //Row的水平間距為24px,垂直間距為32px

範例操作

測試的時候可以按滑鼠右鍵，點擊檢查或是開發者人員工具

點擊預設的斷點（行動S/M/L、Tablet、膝上型電腦、4k)或者是選擇實機尺寸做測試

一、首頁排版

程式碼解析：

這段程式碼使用了 Row 和 Col 來進行響應式排版，這些是 Ant Design 提供的網格系統中的兩個核心組件。以下是對排版的詳細說明：

Row 和 Col 的意義

• Row: 作為一個行（row），它是網格系統的容器，裡面放置多個列（columns）。每個 Row 的總寬度為 24 單位。
• Col: 每一個列用來劃分行中的內容，每列的寬度可以根據屏幕大小設置，且總寬度不可超過 24 單位。

響應式佈局 (sm, md, lg)

這裡的 Col 元素分別使用了 sm、md 和 lg 來設置不同屏幕大小下的佈局變化，依據屏幕的寬度自動調整每個列所占的比例。這裡的斷點預設如下：

• sm（小屏幕）: 當視窗寬度在 576px 及以上時應用。
• md（中等屏幕）: 當視窗寬度在 768px 及以上時應用。
• lg（大屏幕）: 當視窗寬度在 992px 及以上時應用。

解釋程式碼中的 Row 和 Col

1. Row：
   • 整個頁面包含在一個 Row 中，表示一行的開始。
2. Col：

   • 第一個 Col：

     • sm={{ span: 24 }}：在小於 576px 的螢幕上，這一列將佔滿整行。
     • md={{ span: 24 }}：在 768px 以上的螢幕上，這一列同樣佔滿整行。
     • lg={{ span: 4 }}：在大於 992px 的螢幕上，這一列會佔據 4 個單位（大約 1/6 的寬度），因此會呈現為一個側邊欄。
     • 這個列中渲染了 Header 元件。

   • 第二個 Col：

     • sm={{ span: 24 }}：在小螢幕時，這一列也佔滿整行。
     • md={{ span: 24 }}：在中等螢幕時，繼續佔滿整行。
     • lg={{ span: 20 }}：在大螢幕上，這一列佔 20 個單位（約 5/6 的寬度），顯示主要內容區域。
     • 這個列中渲染了 PlaceList 元件。

排版效果

1. 小屏幕（sm <= 576px）：Header 和 PlaceList 會堆疊在一起，兩者各自佔滿整行。

2. 中等屏幕（md <= 768px）：佈局與小屏幕相同，Header 和 PlaceList 仍然會堆疊並各佔一整行。

3. 大螢幕（lg > 992px）：Header 會成為一個側邊欄，佔據左側 4 個單位，PlaceList 則佔據右側的 20 個單位，佈局變為兩列併排顯示。

電腦版畫面：

平板/手機 畫面：

1. 平板：
   
2. 手機：
   

二、景點排版

程式碼解析：

在這段程式碼中，Row 和 Col 的作用是根據不同螢幕大小來排列 PlaceItem（每個目的地），具體的排版方式如下：

Row 和 Col 的使用

1. Row：

   • Row 是網格的容器，裡面包含多個 Col，每個 Col 渲染一個 PlaceItem。所有的目的地項目都會放在這個 Row 中進行排列。

2. Col：

   • 每個 Col 負責分配一個目的地項目（PlaceItem）的寬度。根據不同螢幕尺寸使用響應式設置來自適應排列：
     • sm={{ span: 24 }}：在小螢幕（小於 576px）下，每個 Col 會佔滿整行，所有目的地會垂直堆疊，一行只顯示一個項目。
     • md={{ span: 12 }}：在中等螢幕（大於 768px）下，每個 Col 佔 12 個單位（即一行顯示 2 個項目，佔一半的寬度）。
     • lg={{ span: 6 }}：在大螢幕（大於 992px）下，每個 Col 佔 6 個單位（即一行顯示 4 個項目，每個項目佔 1/4 的寬度）。

排版效果

• 小螢幕（sm <= 576px）：每個目的地（PlaceItem）佔滿一行，所有項目垂直排列。
• 中等螢幕（md <= 768px）：一行顯示 2 個目的地，並排顯示。
• 大螢幕（lg > 992px）：一行顯示 4 個目的地，併排顯示，最多可以同時看到 4 個項目。

電腦版畫面：

平板/手機畫面：

1. 平板畫面：
   
2. 手機畫面：