10月份有機會從零開始設計一整個企業(yè)網(wǎng)站。借此機會用上了心儀已久的960 Grid System。我們四年前的舊網(wǎng)站也即將改版，原來設計的寬度是1000px，我們打算今后都統(tǒng)一到960px，同時用上960 Grid System。下面整理了使用960 Grid System時考慮的一些問題，菜鳥們共勉。

為什么是960px？
一直以來，網(wǎng)頁設計師都希望尋找一個理想的頁面寬度值，既能適應大部分屏幕，又盡可能的在一行顯示更多的信息。

我們首先會考慮的是全屏自適應，但這并非一個好的解決方案。一方面，需要做一個能適應各個寬度的設計，從背景圖片，到每個欄目標題的文字長度，都需要考慮到適應多變的寬度；另一方面，也是最致命的一點，相比英文單詞，中文方塊字是沒有起伏的，用戶對文字位置記憶的依賴性更大。自適應寬度也就意味著一行顯示的文字數(shù)是不定的，閱讀中文文字塊時很可能很難一下找到剛才讀到的那個地方現(xiàn)在到哪去了。因此，固定頁面寬度比自適應更常用。過去，信息閉塞獨立思考的我們會考慮用主流屏幕寬度－20px（IE中左右邊框＋滾動條的寬度）。在1024＊768的分辨率下，頁面寬度應該為1004px。但過不了多久，很多人便意識到，有一個更好的寬度——960px。

960 ＝ 2^6*3*5。與1004這個無厘頭的數(shù)字相比，960能夠被12、15、16、24整除，得數(shù)分別為80、64、60、40，這些數(shù)字聽著就和諧而且靠譜。因此960非常適合于使用柵格設計系統(tǒng)進行網(wǎng)頁設計。

為什么要用柵格設計系統(tǒng)?
柵格設計系統(tǒng)，即Gird System（又稱網(wǎng)格設計系統(tǒng)、標準尺寸系統(tǒng)、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設計的主流風格之一。

柵格設計系統(tǒng)在印刷出版物的排版設計中十分普遍，網(wǎng)頁設計常會從印刷排版中汲取靈感。在網(wǎng)頁設計中采用柵格設計系統(tǒng)不單能夠繼承工整簡潔的風格，還能大大的減少設計的工作量；從前端工程的角度來說，這種排版方式優(yōu)點不言而喻：天然的規(guī)范性和可重用性。從整個團隊來看，使用柵格設計系統(tǒng)能簡化工作流程，便于交流，也便于分工和統(tǒng)一風格。

這是使用3＊3的網(wǎng)格的960px頁面設計草圖，來自“The Principles of Beautiful Web Design”。

960px是唯一的么？
960是否是唯一最優(yōu)的頁面寬度呢？當然不是。目前使用柵格系統(tǒng)的頁面的寬度并不嚴格就是960px，也可能是950px，例如yahoo的YUI框架就是950px。關于網(wǎng)頁柵格系統(tǒng)設計的介紹可以看看TaobaoUED的這篇文章。1024＊768也不會永遠是主流分辨率，隨著分辨率的發(fā)展，下一個較優(yōu)寬度很可能是1440（2^5*3^2*5），或者是一個沒有分辨率的時代，頁面能夠按比例自動縮放（就像現(xiàn)在在移動版safari看到的那樣）。另外，好的設計和創(chuàng)意常常需要打破規(guī)則，柵格設計系統(tǒng)也并非網(wǎng)頁排版唯一可用的風格，在主流之外會一直存在一些很優(yōu)秀的非960px頁面（尤其是全flash網(wǎng)站）；有時候人們會議論他們SEO上的缺陷，或者兼容性、用戶體驗不夠好，但從藝術的角度上他們依然很優(yōu)秀。

為什么用960 Grid System？
960 Grid System是由Nathan Smith開發(fā)的CSS框架，有12列、16列、24列三個版本。CSS對于很多程序員來說可能完全不屑于優(yōu)化，但它確實和其他的程序代碼一樣需要架構和優(yōu)化。即使運營的是一個很小的網(wǎng)站，適當?shù)亟M織、重用CSS代碼能夠節(jié)省相當多的時間和成本。CSS框架正是那個能讓你在每個網(wǎng)站都屢試不爽的東西，把那些無聊重復的工作都交給它們吧，把自己的精力集中在怎么創(chuàng)造更令人動心的設計上！

而且，960 Grid System不僅僅提供了CSS框架，它還提供了可打印的縮略圖表，F(xiàn)irewofks、Phototshop、OmniGraffle 和Vision的模板源文件??你可以讓項目組的很多人都用上它。

它也能為你減少了很多兼容性問題，它支持被yahoo評為A級別的瀏覽器：

用960 Grid System做出來的東西好看么？
這個問題很有現(xiàn)實主意色彩。使用960 Grid System創(chuàng)造好網(wǎng)站的能力毋庸置疑，在它的網(wǎng)站上列出了許多成功案例。此外，wordpress用戶熟悉的WooThemes也用了960Grid System。

具體到中文的環(huán)境中，每個設計師都有自己的判斷。例如我自己覺得16列的網(wǎng)格系統(tǒng)比較適合中文企業(yè)網(wǎng)站，你可能會有別的看法。但是并不是用了它就一定能創(chuàng)造出令人滿意的網(wǎng)頁?！癋rameworks are merely tools that help people achieve solutions, not the solutions themselves. It’s up to designers and developers to combat class-itis and div-itis.（框架只是幫助人們獲取解決解決方案的工具，不是解決方案本身。它取決于設計師和開發(fā)者如何駕馭class和div）”。

對于開發(fā)者來說，用框架總好于不用。還有很多優(yōu)秀的CSS框架可用。960 Grid System是一個比較單純的框架，它不關心字體、顏色??你可以為自己的網(wǎng)站定制一份字體顏色的框架。但框架也意味著難免會有一些你用不上的樣式，如果你的網(wǎng)站很在意這方面的問題，需要謹慎考慮使用框架。

最后，值得一讀的一些參考文章

彬Go的文章：
《960網(wǎng)格系統(tǒng)（翻譯）》
《960 Grid System 基本原理及使用方法（翻譯） 》
《使用Photoshop+960 Grid System模板進行網(wǎng)頁設計 》
《精選15個國外CSS框架》

一些經(jīng)典的使用教程
Fight Div-itis and Class-itis With the 960 Grid System
Prototyping With The Grid 960 CSS Framework

原文：http://www.youxiangfa.com/web/about-960-grid-system/