編者按：簡單入門教程，適合對 Grid 一知半解的同學。基礎知識普及一說就懂，側邊欄實戰避雷指南，滿滿干貨。

@Akane_Lee：我踩到沒把 Grid 學好的雷，特此筆記。之前《Grid 的運用：PS 外掛》一文提到 Grid 運用但不夠清晰，實戰遇到問題：網頁有側邊欄時，怎麼設計才符合 Grid？

Grid 規範圖解（以 1000px 為例）

Grid 分為紅、綠、藍、透明四區塊：

• Column 欄（紅，60px）：承載圖文影音等主內容，所有主內容數據以此格為起點對齊放置。
• Gutter 間隙（透明，20px）：欄與欄之間的間距。
• Grid padding 留白（綠，30px）：主要文本與邊緣間距，屏幕縮至最小仍顯示的部分。我踩雷就在这裡。
• 藍色區塊：不在 Grid 計算內，但必須設計！超大寬屏時，主內容區不再跟隨拉大（否則文本圖片變形），唯有藍色區塊持續左右展延。頁面寬度 = 欄 + 間隙 + 留白，藍色不算在內（屏幕窄到一定程度時完全消失）。

遇到的狀況：側邊欄對齊留白的錯誤做法

上圖可見：1. 延伸範圍（不計入 Grid）、2. 留白、3. 欄、4. 間隙。側邊欄起點對齊留白——這是有問題的做法。留白是最小屏幕時仍希望看到的視覺緩衝區。

若「從留白開始作側邊欄」

屏幕縮小時「延伸範圍」完全消失，畫面直接從「留白」開始，兩側視覺緩衝消失。除非故意追求此效果，否則通常不這樣硬切齊。我們想要的是左右各留一點灰底作視覺緩衝。

左右留灰邊能聚焦視線與內容於主區域。

修正方案

同樣的 Grid，微調即可。記得：即使照 Grid 設計，CSS 仍有 padding 功能。

1. 灰底做進留白區，確保最小屏幕仍出現。
2. 利用 Padding 將側邊欄往內縮。
3. 右側主內容區起點正好對準欄。
4. 主內容區結尾也在欄內，用 Padding 留出白邊。
5. 右側騰出空間做灰底，所有主要內容全部在欄內。

「所有主要內容全部在欄內」是 Grid System 核心概念，搞懂留白作用才能設計出大家都好做的響應式網頁，前端工程師會感謝你。

Mobile 端設定

順帶一提，這是 Mobile 的設定參考。