柵格系統的形成
柵格系統(grid system)最早使用在17世紀末的法國印刷業，出版業。
維基百科對其定義為：柵格設計系統(又稱網格設計系統、標準尺寸系統、程式版面設計、瑞士平面設計風格、國際主義平面設計風格)，是一種平面設計的方法與風格。
網頁柵格系統是有平面柵格系統中發展而來，以規則的網格陣列來指導和規範網頁中的版面布局以及資訊分布。
柵格系統的原理
柵格系統可以按柵格數分為12列，16列，24列等，可以自由設計柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區塊寬度為w，a代表乙個柵格單元的寬度，a代表乙個柵格的寬度，i為柵格與柵格之間的距離，n為正整數，則有w=(a＊n)+(n-1)*i,由於a=a+i，可得(a＊n)-i=w。
這個公式表述了網頁的布局與網頁背後柵格系統之間的關係。來觀察經典的雅虎案例：
yahoo的**頁面寬度為w=950px，每個區塊與區塊的間隔為i=10px；如果應用上面的公式，可以推出a=40px，既yahoo首頁橫向版式設計採用的柵格系統為：(40×n)- 10 = w。只要保證乙個橫向維度的各個區塊的n值相加等於24，即可保證頁面的寬度一定是950px，950px的寬度也恰好就是當n=24的時候，w的寬度值。
在柵格系統中，設計師根據需要指定不同的版式或者劃分區塊改變a和i的值進行設計，這樣，乙個柵格系統的應用就從此開始了。
經典960柵格
設計師們偏愛用蘋果系統做設計，蘋果下瀏覽器的預設寬度為960px, 在 1024 x 768 的解析度下，我們再開啟firefox，自然狀態下，firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣出現了。960只是個符號，並不是標準數。
上面列舉的都是大型門戶**，它們的首頁寬度為950px/960px。除了微軟的live search。根據上面的簡單分析可以認為：當搭建頁面結構複雜的門戶型**時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px。為什麼要選擇這個寬度呢？我們從數學著手：960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身)，我們標記為：
n(960) = n(2^6 * 3 * 5) = 26
根據上面的演算法，可以得到：
n(360) = n(2^3 * 3^2 * 5) = 22
n(480) = n(2^5 * 3 * 5) = 22
n(720) = n(2^4 * 3^2 * 5) = 28
n(750) = n(2 * 3 * 5^3) = 14
n(800) = n(2^5 * 5^2) = 16
n(960) = n(2^6 * 3 * 5) = 26
n(1000) = n(2^3 * 5^3) = 14
n(1024) = n(2^10) = 9
n(1440) = n(2^6 * 3^2 * 5) = 34
n(1920) = n(2^7 * 3 * 5) = 30
n越大，可組合的寬度值就越多。對柵格系統來說，這意味著越靈活。
目前絕大多數顯示器都支援 1024 x 768 及其以上解析度。為了有效的利用螢幕寬度同時保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網頁柵格系統中的最佳寬度了，也許不久的將來，將會流行1440。
使用柵格系統的優勢
對於設計師來說，柵格系統更多的是一種布局思想，可以更有邏輯地進行設計工作。靈活地運用柵格系統，不僅可以讓整個**各個頁面的布局保持一致，讓網頁的資訊呈現更加美觀易讀，讓設計稿有更好的結構，更可以通過匹配不同組合，做出很多優秀和獨特的排版設計。
使用網格系統，可以使網頁設計給使用者正式感和規範感，還具有一種結構分明的設計感，提公升使用者體驗。網格系統不意味著循規蹈矩，一味按照網格線來進行布局。網格系統的意義在於更靈活的幫助設計師有序布局，而不是限制設計師的設計。
對於前端開發人員來說，柵格系統的使用，給整個**的頁面結構定義了乙個標準，大大提高了網頁的規範性。在柵格系統下，頁面中所有元件的尺寸都是有規律的，可重用的，這對於大型**的開發和維護來說，能節約不少成本。
隨著響應式設計的流行，柵格系統開始被賦予新的意義，那就是，一種響應式設計的實現方式。響應式的要點是為同乙個頁面設計多種布局形態，分別適配不同螢幕尺寸的裝置。
可以看到，乙個頁面可以拆分成多個區塊來理解，而正是這些區塊共同構成了這個頁面的布局。根據不同的螢幕尺寸情況，調整這些區塊的排版，就可以實現響應式設計。而借助柵格系統，設計與前端開發人員可以很容易的設計和建立響應式的頁面布局。
柵格系統是一種格式化的設計工具，使用柵格系統是一種好的習慣，設計師可以更專注於內容呈遞，更專注於強調重點。當然，規矩是用來打破的，當我們理解了布局的理念，掌握了柵格的手法之後，也無需拘泥於柵格的形式，可以對其「革命」，進行創新。
酷！ai的漸變居然可以這麼炫！
這樣排版，肖戰都覺得帥！
不會c4d？其實ps也可以做！
為什麼要元件化
工程任何一點改動都會造成整個工程的重新編譯.記憶最深的就是早期在沒有進行元件化的時候,龐大的工程動輒需要十幾分鐘的編譯時間,一杯茶的時間就出來了,很多時候,不得不眼巴巴的等著,儘管現在可以使用facebook出品的buck以及來自阿里的feeline來加速編譯過程,單仍然不夠.整個工程中充斥的大量重...
為什麼要原型設計
隨著原型應用的普及，越來越多的產品會採用原型設計來表述 完善整體需求，這樣做自然有其原因，但為何要進行原型設計呢？在回答這個問題前，首先要說一下溝通這個普遍存在的問題。人們在溝通過程中，乙個人通常只能說出心中所想的80 但對方聽到的最多只能是60 聽懂的卻只有40 結果執行時，只有20 了。心中的想...
為什麼要session 持久化？
為什麼需要持久化 客戶端訪問了某個能開啟會話功能的資源，web伺服器就會建立乙個與該客戶端對應的httpsession物件，每個httpsession物件都要站用一定的記憶體空間。如果在某一時間段內訪問站點的使用者很多，web伺服器記憶體中就會積累大量的httpsession物件，消耗大量的伺服器記...