什麼是柵格系統
1、關於柵格系統的典故
2023年，新登基的法國國王路易十四感到法國的印刷水平不盡人意，因此命令成立乙個管理印刷的皇家特別委員會。首要任務是設計出科學的，合理的，重視功能性的新字型。委員會由數學家尼古拉斯加宗(nicolas jaugeon)擔任領導，以羅馬體為基礎，採用方格為設計依據，每個字型方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣，乙個印刷版面就有2304個小格組成，在這個嚴謹的幾何網格網路中設計字型的形狀，版面的排版，試驗傳達功能的效能，這是世界上最早對字型和版面進行科學實驗的活動，也是柵格系統最早的雛形。
到20世紀初，德國、荷蘭、瑞士等國的平面設計師們發現通過維持視覺秩序，從而使版面能更加清晰有效地傳遞資訊，二戰後這種理念在瑞士得到了良好的發展，直到20世紀40年代後期，第一次出現了使用網格進行輔助設計的印刷作品。
2、柵格的概念
柵格系統以規則的網路陣列來指導和規範網頁中的版面布局以及資訊分布。柵格系統有時候也稱為網格系統。
柵格設計系統(又稱網格設計系統、標準尺寸系統、程式版面設計、瑞士平面設計風格、國際主義平面設計風格)，是一種平面設計的方法與風格。
而ui設計裡常用的網頁柵格系統是從平面柵格系統中發展起來，對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的資訊呈現更加美觀易讀、更具可用性，而且對於前端來說，網頁將更加靈活與規範。
例如在網頁設計中，如果把網頁寬度平均切分為多個網格單元，每個單元之間預留一定的空隙，此時整個頁面就如同乙個柵格系統，
如圖：站酷、ui中國、ant design pro均為24柵格
二、使用柵格系統的好處
1、提高效率
柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；熟練運用網格系統能夠讓你的設計更有秩序和節奏感，頁面資訊的展現更加清晰，提高閱讀效率，從而提供給使用者舒適的使用體驗，加快認知速度。
最重要的是，它給整個產品的頁面結構定義了乙個標準；對於視覺設計師來說，不用再為產品的每乙個頁面都想乙個寬度或高度了；對於前端開發工程師來說，頁面的布局設計將完全是規範的和可重用的；對於內容編輯或廣告銷售來說，所有的廣告都是規則的、通用的，再也不用做出一套多張不同尺寸的廣告圖了。這對於專案的開發和維護來說，能節約不少成本。
2、響應式
在科技快速發展的今天，90％的**互動都是基於螢幕的，通過手機，平板電腦，膝上型電腦，電視和智慧型手錶來與外界產生聯絡；多屏設計已成為商業設計中不可或缺的一部分，響應式設計正迅速成為常態；響應式最大的優勢是能相容不同的裝置尺寸，不管螢幕尺寸如何放大縮小都能自動適應，作為ui設計師，我們希望為我們的產品在不同尺寸下都能為使用者提供良好的使用者體驗，柵格系統就可以幫助我們做到這一點。
3、規範設計/提高團隊協作
當多位設計師共同設計產品時，乙個統一標準就變得尤為重要。如果沒有乙個統一的框架去約束的話，我們產品的頁面和元件的標準可能各式各樣，這樣的話整個產品的頁面都會比較混亂；因此，柵格系統有助於將介面設計工作分開，因為多位設計師可以在統一的布局下進行不同部分工作，並且無縫整合並保持連貫。
4、加速開發並保證視覺還原度
大多數設計專案的實施，涉及到設計者和開發者之間的協作；柵格化提高了頁面布局的一致性跟復用性；避免了設計師與開發者在細節上的反覆溝通確認，從而提公升了整個設計開發流程的效率，並能幫助開發者實現較為理想的設計還原。
三、柵格系統的結構與使用
1、8畫素原則
如何定義柵格系統最小單位？參考已有的設計規範和前輩的經驗，加上目前市場上主流的螢幕解析度，以8畫素作為乙個步進單位的變化，在視覺上能感受到較為明顯的差異，因此選取8做為柵格系統的原子單位。
主要原因：
1⃣️ 8作為偶數，既能適應絕大多數裝置螢幕，又能保證在輸出各種倍圖時尺寸不出現奇數(ios匯出1、2、3倍圖，android匯出1、1.5、2、3、4倍圖均為偶數)
2⃣️ 8畫素不大不小，利用8或8的倍數規範元素和間距大小，既能保證元素視覺上的統一，也能保證間距大小上存在較為明顯的差異，
2、欄(column)與水槽(gutter)
柵格系統由若干個欄與水槽構成，欄上用於放置內容，水槽則用於控制內容左右之間的間距，把控頁面內的留白
如圖所示： g=水槽 c=欄 s=外間距 w=柵格系統總寬
通常情況下，水槽的寬度不變，欄的寬度隨著螢幕尺寸的變化而變化，螢幕尺寸/解析度越大，欄寬度越寬，螢幕尺寸/解析度越小，欄的寬度越小，當達到臨界值時水槽與欄的數量將會發生變化
例：裝置750解析度及以下使用6柵格，750～1366解析度使用12柵格，1366～1920解析度使用24柵格
(設計時具體使用6柵格、12柵格還是24柵格需根據產品的業務需求去分配，柵格的數量越多，頁面就會被分割的越碎，設計中越難以把控，)
3、盒子
「盒子」會根據柵格數量的不同進行等分或不等分，比如：1：1：1、 1：2：1、 2：5：5、 3：4：5、 1：1：1：1，具體採用哪種組合需要我們根據產品的業務需求來定；比如當頁面需要承載更多更雜的資訊時，便可使用24柵格，然後根據24柵格我們對「盒子」進行更多的組合，從而放置更多更複雜的資訊
但一定要切記，頁面被分割的越碎時，設計中越難以把控！！！
以下是一些「盒子」的組合參考
匯出tif 將某值柵格 柵格制定的實踐（上）
什麼是柵格系統 1 關於柵格系統的典故 1692年，新登基的法國國王路易十四感到法國的印刷水平不盡人意，因此命令成立乙個管理印刷的皇家特別委員會。首要任務是設計出科學的，合理的，重視功能性的新字型。委員會由數學家尼古拉斯加宗 nicolas jaugeon 擔任領導，以羅馬體為基礎，採用方格為設計依...
ASCII柵格的顯示
今天剛好有人問到乙個有關 ascii 柵格資料的問題，這裡梳理下，用最簡單的方式極速理解。什麼是ascii柵格？就是用ascii文字記錄的柵格資料 怎麼得到ascii柵格？比如使用工具 raster to ascii 一般在 ascii 柵格的檔案頭中我們會看到這幾行 ncols和nrows表示這份...
bootstrap的柵格系統
bootstrap的理解 1.bootstrap的柵格系統 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。1.1柵格系統的簡介 柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局。2...