Grid运用实战！帮你轻松掌握Grid的进阶教程

编者按：这是一篇简单的入门教程，适合对Grid 还一知半解的同学阅读，前面的基础知识普及一说就懂，后边的Grid侧边栏实战也能让很多设计师借鉴避免踩雷，不长的文章都是干货，学习下。

@Akane_Lee ：我踩到一个没把 Grid 学好的雷orz，特此拿出来笔记下。之前在 《 Grid 的运用：PS外挂》一文中有简单提到 Grid 的运用，但讲得不够清楚，后来活用时遇到个问题：如果你的网页有侧边栏的时候，要怎么设计才符合 Grid？

规范图

参考上图，Grid 分成红、绿、蓝、透明等几个区块。这个图是 1000px 的示范。

Column 栏

红色，60px
放图文影音等的部份。所有主内容的数据都会以这个格子为起点对齐放置。

Gutter 间隙

透明，20px
栏和栏之间的间距。

Grid padding 留白

绿色，30px
主要文本和边缘的间距，屏幕缩到最小的时候仍会显示的部份。我踩到的就是这里，之后说明原因。

蓝色

这区块不在 Grid 计算内，但还是要设计喔！当屏幕持续拉伸，比如超大宽屏幕，不能够把整块主内容区也跟着拉大，文本图片都会变形。当 Web 尺寸宽到一定程度时，还会持续左右展延的就只有蓝色区块。整个页面的宽度等于 栏＋间隙＋留白，蓝色区块不算在内！（换言之，当 Web 尺寸窄到一定程度时这区块就会完全消失。）

以上是对Grid的简易说明。

这里强烈推荐一款Grid外挂教程：《PS 参考线插件GuideGuide下载及使用说明》，谁用谁知道！

遇到的状况

1. 延伸的范围，不计算在Grid数字内。

2. 留白

3. 栏

4. 间隙

上图可以看出这是个有「侧边栏」的网页，同时侧边栏的起点对齐留白。这是个有问题的做法，留白是在最小屏幕时我们仍希望能看到的部份 。

如果「从留白开始作侧边栏」

如果「从留白开始作侧边栏」，当屏幕缩小时「1. 延伸的范围」会完全消失，画面直接从「2.留白」开始。你可以看到两边的视觉缓充不见了。除非是故意想要这种效果，否则通常不会这么直接切齐。

我们想要的应该是左右两边各留一点灰底当视觉缓充。

左右两边留一点灰边有把视线、内容集中在主内容区的效果。

修改

还是同样的Grid，但稍微调整了一下。记得，即使照 Grid 设计版面，CSS是有 padding 这个功能的。

1. 灰底做进留白区里，确保最小屏幕时仍会出现。

2. 利用 Padding 将侧边栏往内缩。

3. 这样就可以看到右方主内容区的起点正好对准栏了。

4. 主内容区的结尾也是在栏内，利用 Padding 空出一点点白边。

5. 这样右方就有空间做灰底，所有主要内容全部都在字段里了。

「所有主要内容全部都在字段里」是 Grid System 很重要的概念，搞清楚留白的作用才能设计出大家都好做的 Responsive Web。F2E（前端工程师） 会感谢你的。

Mobile

顺带一提，这是 Mobile 的设定。

一大波新手教程来袭！

配色基础知识全科普！
《设计师配色宝典！教你从零开始学配色（一）》

秒变配色高手的6个绝招！
《秒变配色高手！怎么都不会错的6条网页设计配色原则》

设计师不可错过的高效APP设计利器新手教程！
《SKETCH设计教室！从零开始学APP设计利器SKETCH（一）》

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

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量76万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：