編者按：這是一篇簡(jiǎn)單的入門(mén)教程，適合對(duì)Grid 還一知半解的同學(xué)閱讀，前面的基礎(chǔ)知識(shí)普及一說(shuō)就懂，后邊的Grid側(cè)邊欄實(shí)戰(zhàn)也能讓很多設(shè)計(jì)師借鑒避免踩雷，不長(zhǎng)的文章都是干貨，學(xué)習(xí)下。

@Akane_Lee?：我踩到一個(gè)沒(méi)把 Grid 學(xué)好的雷o(hù)rz，特此拿出來(lái)筆記下。之前在 《?Grid 的運(yùn)用：PS外掛》一文中有簡(jiǎn)單提到 Grid 的運(yùn)用，但講得不夠清楚，后來(lái)活用時(shí)遇到個(gè)問(wèn)題：如果你的網(wǎng)頁(yè)有側(cè)邊欄的時(shí)候，要怎么設(shè)計(jì)才符合 Grid？

規(guī)范圖

參考上圖，Grid 分成紅、綠、藍(lán)、透明等幾個(gè)區(qū)塊。這個(gè)圖是 1000px 的示范。

Column 欄

紅色，60px
放圖文影音等的部份。所有主內(nèi)容的數(shù)據(jù)都會(huì)以這個(gè)格子為起點(diǎn)對(duì)齊放置。

Gutter 間隙

透明，20px
欄和欄之間的間距。

Grid padding 留白

綠色，30px
主要文本和邊緣的間距，屏幕縮到最小的時(shí)候仍會(huì)顯示的部份。我踩到的就是這里，之后說(shuō)明原因。

藍(lán)色

這區(qū)塊不在 Grid 計(jì)算內(nèi)，但還是要設(shè)計(jì)喔！當(dāng)屏幕持續(xù)拉伸，比如超大寬屏幕，不能夠把整塊主內(nèi)容區(qū)也跟著拉大，文本圖片都會(huì)變形。當(dāng) Web 尺寸寬到一定程度時(shí)，還會(huì)持續(xù)左右展延的就只有藍(lán)色區(qū)塊。整個(gè)頁(yè)面的寬度等于 欄＋間隙＋留白，藍(lán)色區(qū)塊不算在內(nèi)?。〒Q言之，當(dāng) Web 尺寸窄到一定程度時(shí)這區(qū)塊就會(huì)完全消失。）

以上是對(duì)Grid的簡(jiǎn)易說(shuō)明。

這里強(qiáng)烈推薦一款Grid外掛教程：《PS 參考線(xiàn)插件GuideGuide下載及使用說(shuō)明》，誰(shuí)用誰(shuí)知道！

遇到的狀況

1. 延伸的范圍，不計(jì)算在Grid數(shù)字內(nèi)。

2. 留白

3. 欄

4. 間隙

上圖可以看出這是個(gè)有「?jìng)?cè)邊欄」的網(wǎng)頁(yè)，同時(shí)側(cè)邊欄的起點(diǎn)對(duì)齊留白。這是個(gè)有問(wèn)題的做法，留白是在最小屏幕時(shí)我們?nèi)韵Ｍ芸吹降牟糠?。

如果「從留白開(kāi)始作側(cè)邊欄」

如果「從留白開(kāi)始作側(cè)邊欄」，當(dāng)屏幕縮小時(shí)「1. 延伸的范圍」會(huì)完全消失，畫(huà)面直接從「2.留白」開(kāi)始。你可以看到兩邊的視覺(jué)緩充不見(jiàn)了。除非是故意想要這種效果，否則通常不會(huì)這么直接切齊。

我們想要的應(yīng)該是左右兩邊各留一點(diǎn)灰底當(dāng)視覺(jué)緩充。

左右兩邊留一點(diǎn)灰邊有把視線(xiàn)、內(nèi)容集中在主內(nèi)容區(qū)的效果。

修改

還是同樣的Grid，但稍微調(diào)整了一下。記得，即使照 Grid 設(shè)計(jì)版面，CSS是有 padding 這個(gè)功能的。

1. 灰底做進(jìn)留白區(qū)里，確保最小屏幕時(shí)仍會(huì)出現(xiàn)。

2. 利用 Padding 將側(cè)邊欄往內(nèi)縮。

3. 這樣就可以看到右方主內(nèi)容區(qū)的起點(diǎn)正好對(duì)準(zhǔn)欄了。

4. 主內(nèi)容區(qū)的結(jié)尾也是在欄內(nèi)，利用 Padding 空出一點(diǎn)點(diǎn)白邊。

5. 這樣右方就有空間做灰底，所有主要內(nèi)容全部都在字段里了。

「所有主要內(nèi)容全部都在字段里」是 Grid System 很重要的概念，搞清楚留白的作用才能設(shè)計(jì)出大家都好做的 Responsive Web。F2E（前端工程師） 會(huì)感謝你的。

Mobile

順帶一提，這是 Mobile 的設(shè)定。

一大波新手教程來(lái)襲！

配色基礎(chǔ)知識(shí)全科普！
《設(shè)計(jì)師配色寶典！教你從零開(kāi)始學(xué)配色（一）》

秒變配色高手的6個(gè)絕招！
《秒變配色高手！怎么都不會(huì)錯(cuò)的6條網(wǎng)頁(yè)設(shè)計(jì)配色原則》

設(shè)計(jì)師不可錯(cuò)過(guò)的高效APP設(shè)計(jì)利器新手教程！
《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（一）》

原文地址：blog.akanelee
作者：@Akane_Lee

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量76萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：