我踩到一個沒把 Fixed Grid 學好的雷orz 特此拿出來筆記下。之前在 [Grid 的運用：PS外掛] (https://blog.akanelee.me/posts/194263-application-of-grid/
) 一文中有簡單提到 Grid 的運用，但講得不夠清楚，後來活用時遇到個問題：如果你的網頁有側邊欄的時候，要怎麼設計才符合 Grid？
參考上圖，Grid 分成紅、綠、藍、透明等幾個區塊。這個圖是 1000px 的示範。
Column 欄
紅色，60px
放圖文影音等的部份。所有主內容的資料都會以這個格子為起點對齊放置。
Gutter 間隙
透明，20px
欄和欄之間的間距。
Grid padding 留白
綠色，30px
主要文本和邊緣的間距，螢幕縮到最小的時候仍會顯示的部份。我踩到的就是這裡，之後說明原因。
藍色
這區塊不在 Grid 計算內，但還是要設計喔！當螢幕持續拉伸，比如超大寬螢幕，不能夠把整塊主內容區也跟著拉大，文本圖片都會變形。當 Web 尺寸寬到一定程度時，還會持續左右展延的就只有藍色區塊。整個頁面的寬度等於 欄＋間隙＋留白，藍色區塊不算在內！（換言之，當 Web 尺寸窄到一定程度時這區塊就會完全消失。）
以上是對Grid的簡易說明。
遇到的狀況
- 延伸的範圍，不計算在Grid數字內。
- 留白
- 欄
- 間隙
上圖可以看出這是個有「側邊欄」的網頁，同時側邊欄的起點對齊留白。這是個有問題的作法，留白是在 最小螢幕時我們仍希望能看到的部份 。
如果「從留白開始作側邊欄」
如果「從留白開始作側邊欄」，當螢幕縮小時「1. 延伸的範圍」會完全消失，畫面直接從「2.留白」開始。你可以看到兩邊的視覺緩充不見了。除非是故意想要這種效果，否則通常不會這麼直接切齊。
我們想要的應該是左右兩邊各留一點灰底當視覺緩充。
左右兩邊留一點灰邊有把視線、內容集中在主內容區的效果。
修改
還是同樣的Grid，但稍微調整了一下。記得，即使照 Grid 設計版面，CSS是有 padding 這個功能的。
- 灰底做進留白區裡，確保最小螢幕時仍會出現。
- 利用 Padding 將側邊欄往內縮。
- 這樣就可以看到右方主內容區的起點正好對準欄了。
- 主內容區的結尾也是在欄內，利用 Padding 空出一點點白邊。
- 這樣右方就有空間做灰底，所有主要內容全部都在欄位裡了。
「所有主要內容全部都在欄位裡」是 Grid System 很重要的概念，搞清楚留白的作用才能設計出大家都好做的 Responsive Web。F2E 會感謝你的。
Mobile
順帶一提，這是 Fixed Grid System 在 Mobile 的設定。之後在找機會寫篇關於 Fluid Grid System 的文。
