网页设计中的栅格系统（grid systems）笔记

学习链接：

http://www.om19.cn/2009/03/31/vertical-rhythm-and-the-incremental-leading/

http://ued.taobao.com/blog/2009/06/29/vertical-rhythm-and-the-incremental-leading-2/

 我的感觉，简单来说就是使网页的视觉外观在垂直方向上更整齐更有韵律。说来惭愧，以往本人的做法是到了要拆页面的时候再通过初略计算来达到页面各元素整齐划一的效果。按说，这样也没什么不好，至少可以达到一定的目的，但最大的缺点是效率低下，样式表混乱，甚至是重复定义。假如能在拆页之前先规划好，统一写入reset.css，想必会好很多。

在网页里,垂直韵律应由三个因素控制：

字体大小(font-size)

行距(line-height) 参照《字体、排版简明入门》 中行距这一节
 
间距(margin,padding)

认真考量这三个因素的值,才能实现垂直韵律。

设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则
n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是基础行距的倍数 ②
由方程①、② 得出：

行距和全部垂直间距之和为基础行距的倍数。

http://ued.taobao.com/blog/2008/09/17/grid_systems/  网页的栅格系统设计

当A=40，n等于不同数值时W变化的数值表格 ：

只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。由此我们得出以下的应用模式：

http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/   网页栅格系统研究（1）：960的秘密

http://ued.taobao.com/blog/2008/10/22/grid_system_research_2/   网页栅格系统研究（2）：蛋糕的切法

http://www.yeeyan.com/articles/view/snlchina/3570    30个最顶尖的基于栅格系统的博客网站设计

http://ued.taobao.com/blog/2008/10/28/grid_system_research_3/    网页栅格系统研究（3）：粒度问题

http://lifesinger.org/blog/2008/11/grid-system-4/    网页栅格系统研究（4）：技术实现

http://lifesinger.org/lab/2008/grid_design_tool.html  栅格化工具

 另一些声音：

http://www.twinsenliang.net/skill/20081109.html    网格(UED所谓栅格化)方案生成器