👩‍🏫 什麼是 CSS 的 max-width？

• 當 上層母結構的寬度 ≥ max-width 的值，內容會以「max width 的值」為準，100% 呈現，不會向外溢出
• 當 上層母結構的寬度 < max-width 的值，內容會以「上層結構的寬度」為準，等比例縮放呈現

⚙️ 設定方式

• 非全寬顯示時，可用 px 或 % 兩種模式設定最大寬度
  • 預設為 px 模式
  • 在 px 模式下，最大寬度的設定範圍為 700 ~ 4,000 px
• 支援輸入超過上層母結構的寬度的值，但前端實際渲染出來的最大寬度仍等於上層母結構的寬度，因此內容不會超出上層母結構

🎨 支援項目

1. 整個頁面

   • 入口：頂端導航列 > 設定齒輪 icon > 網頁尺寸設定
   • 預設值：「非全寬」且最大寬度為 1,140 px

   

   
   

2. 單一 Section 元件

   • 入口：右側元件設定面板 > 設定 tab > 排版
   • 預設值：「全寬顯示」，此時會以整個頁面的寬度為準

   

   
   

3. 單一 Row 元件

   • 入口：右側元件設定面板 > 設定 tab > 排版
   • 預設值：「全寬顯示」，此時會以上層 Section 的寬度為準

   

   💡

   Product list、Category list、Instagram gallery 等複合式元件，本質上是一種特化的 Row 元件，也適用相同的寬度設定邏輯。