网页栅格系统研究（4）：技术实现
2014年02月27日 | 点击量: 1,861
前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。
Blueprint的实现
Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面： 采用浮动来实现布局，简单明了
950两侧没有margin, 最后一列的class需要加上last
采用额外标签来清除浮动
960.gs的实现
谈到960栅格系统，不得不提960.gs. Nathan Smith在这篇文章中，详细阐述了他的想法和设计思路。这里有个demo页面，核心代码很简单：
以下为引用的内容： 上面就构建了三栏布局： 有意思的几点：
margin是均匀放在950两侧的
所有grid除了宽度不同，左右......
网页栅格系统研究（3）：粒度问题
2014年02月27日 | 点击量: 2,010
目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）： （图1）
纷乱的高度世界
我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向： （图2）
高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化的迹象。实际上，
即便是严格遵守栅格系统的Yahoo!首页，高度方向上也没有严格栅格化。
这究竟是为何？
一切皆有可能
我们缩小关注点： （图3）......
网页栅格系统研究（2）：蛋糕的切法
2014年02月27日 | 点击量: 1,717
首先澄清一个应用场景问题。研究(1)中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。
有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：
以下为引用的内容：
#page { width: 70em; }
为......
网页栅格系统研究（1）：960的秘密
2014年02月27日 | 点击量: 1,833
研究网页栅格系统前，来看一组数据：
网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960
上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。
再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。
根据上面......