柵格系統(tǒng)這種東西和許多同類工具/素材一樣，“系統(tǒng)”二字讓它看起來(lái)無(wú)比高大上，而實(shí)際上大多數(shù)的柵格系統(tǒng)只是一系列縱橫交錯(cuò)的細(xì)線構(gòu)成。很簡(jiǎn)單？看起來(lái)確實(shí)如此。不過(guò)它之所以被冠以“系統(tǒng)”二字，主要還是因?yàn)檫@些線條所涉及的內(nèi)容管理方式、梳理頁(yè)面結(jié)構(gòu)的功能。柵格系統(tǒng)的運(yùn)用會(huì)促使你的網(wǎng)頁(yè)內(nèi)容逐步走向規(guī)則化，實(shí)現(xiàn)一致性的設(shè)計(jì)。下面的20款CSS柵格可以更好地運(yùn)用到網(wǎng)頁(yè)開發(fā)實(shí)踐中去，賦予你的網(wǎng)站以調(diào)理性。

1. ChewingGrid

ChewingGrid 是一款卡片列表風(fēng)的CSS柵格，通常可以用于視頻、磁貼、文本等各種類型的網(wǎng)頁(yè)元素。在使用ChewingGrid的時(shí)候無(wú)需媒體查詢，你需要控制的是列的數(shù)量，最大和最小寬度。設(shè)定的時(shí)候可以直接使用默認(rèn)的柵格，也可以自定義。

2. Motherplate

Mother plate 是一款基于HTML5、CSS3和SCSS的響應(yīng)式模板，它不包含視覺組件，僅在CSS中幫你控制一切。

3. Lemonade

Lemonade 是一款簡(jiǎn)單靈活且易于定制的柵格系統(tǒng)，它是為設(shè)計(jì)師和開發(fā)者而設(shè)計(jì)的，便于他們定制屬于自己的新項(xiàng)目。目前這套柵格系統(tǒng)兼容Chrome、Firefox、Safari、Opera和IE9+。其中預(yù)制了12欄，當(dāng)然你可以定制并增加更多。

4. Reverie

Reverie 框架是一款基于ZUBR Foundation 的強(qiáng)大的HTML5 WordPress 框架。ZUBR Foundation 是一個(gè)強(qiáng)大的原型工具，以它為基礎(chǔ)來(lái)制作框架自然不會(huì)差，而Reverie 本身確實(shí)從中繼承了不少?gòu)?qiáng)大的功能。

5. Jeet

Jeet 是一款市面上相對(duì)先進(jìn)、設(shè)計(jì)直觀的柵格系統(tǒng)，你可以將它視作為Semantic.gs 的理念繼承者。借助強(qiáng)大的預(yù)處理功能，你可有使用真正意義上的百分比來(lái)設(shè)計(jì)柵格系統(tǒng)，這也意味著你可以按照客戶的描述直觀快速地設(shè)定柵格，沒(méi)有嚴(yán)格的12列柵格的限制，你可以更加快速的設(shè)計(jì)，使用更少的代碼來(lái)搞定一切。

6. 1KB Grid

1KB Grid的設(shè)計(jì)靈感來(lái)自于1KB CSS柵格系統(tǒng)，這套基于SASS的柵格系統(tǒng)移除了HTML中多余的類，讓它更靈活也更加易于定制。當(dāng)然，1KB Grid 并非嚴(yán)格意義上的1KB大小，新版的1KB Grid已經(jīng)可以制作流動(dòng)性更強(qiáng)的柵格。

7. Unsemantic

Unsemantic 是一款流態(tài)柵格系統(tǒng)，基于960柵格系統(tǒng)演化而來(lái)。它們的工作原理很接近，但是Unsemantic 更加靈活，可以基于百分比來(lái)設(shè)定。

8. Bourbon Neat

Neat 是一款在Sass和Bourbon的基礎(chǔ)上建立的語(yǔ)義柵格系統(tǒng)。它足夠簡(jiǎn)單又功能強(qiáng)大，能在幾分鐘內(nèi)配置好運(yùn)行起來(lái)，足以應(yīng)付任何響應(yīng)式布局。

9. Herow

Herow 是一款省時(shí)省力的柵格系統(tǒng)，內(nèi)置混入組件易于定制，可以處理各種各樣的響應(yīng)式的問(wèn)題，并且能夠和CSS輕松聯(lián)動(dòng)。

10. Rebar

Rebar 希望能讓響應(yīng)式開發(fā)更加簡(jiǎn)單有效，并且讓CSS樣式保持條理。為了實(shí)現(xiàn)這些功能，開發(fā)者設(shè)定了一個(gè)斷點(diǎn)列表，并且為每個(gè)斷點(diǎn)設(shè)定了一個(gè)單獨(dú)的柵格設(shè)置和容器類，這樣可以更便捷地填充間隔，實(shí)際上BootStrap 3 的柵格系統(tǒng)也是這么做的。

11. Sassline

Sassline 使用Sass和Rems技術(shù)讓你更輕松地為文本內(nèi)容制作柵格系統(tǒng)。Sassline 讓你可以為每個(gè)斷點(diǎn)設(shè)定模塊比例，配合不同類型的內(nèi)容和布局。

12. Skelton

Skeleton 是一個(gè)小型的CSS文檔合集，可以幫你快速開發(fā)一個(gè)看起來(lái)不錯(cuò)的網(wǎng)站，確保網(wǎng)站在17寸筆記本和iPhone上看起來(lái)都不錯(cuò)，它的設(shè)計(jì)原則有三條：響應(yīng)式柵格向下兼容移動(dòng)端，快速上手和無(wú)風(fēng)格關(guān)聯(lián)。

13. Gridism

Gridism 是一款簡(jiǎn)單易用的柵格系統(tǒng)。在低于568px 的屏幕上，柵格會(huì)被堆疊起來(lái)，而在此以上，比如978px和1140px上布局會(huì)更加自由。

14. One % CSS Grid

One % CSS Grid 是一款基于百分比的12欄流態(tài)柵格系統(tǒng)，用來(lái)快速構(gòu)建響應(yīng)式網(wǎng)頁(yè)。作為初始設(shè)定，可以選用最低1280px 的屏幕，也可以選取更低的1024px 的屏幕。

15. Columnal

Columnal 是一款源自Cssgrid.net的柵格系統(tǒng)，而其中的一部分代碼和設(shè)計(jì)靈感則來(lái)自經(jīng)典的960.gs。這款柵格系統(tǒng)和其他的同類差不多，兼容桌面端和移動(dòng)端的設(shè)計(jì)。

16. Less Framework

Less Framework 是一款自適應(yīng)的CSS柵格系統(tǒng)，內(nèi)置了4種布局和3種排版，都是基于同一種柵格。Less Framework旨在高效直觀地建設(shè)網(wǎng)站。

17. Responsive Grid System

Responsive Grid System 是一款流動(dòng)性良好的CSS柵格框架，其中內(nèi)置了12欄、16欄和24欄三種柵格模式，可為所有主流、標(biāo)準(zhǔn)設(shè)備屏幕進(jìn)行媒體查詢。

18. Ingrid

Ingrid 是一款輕量級(jí)的流態(tài)CSS柵格布局系統(tǒng)，開發(fā)者在設(shè)計(jì)這套系統(tǒng)的時(shí)候旨在減少針對(duì)獨(dú)立單元類的使用。相比于傳統(tǒng)的柵格系統(tǒng)，Ingrid 更加有趣也更加靈敏。作為一套可拓展的系統(tǒng)，它擁有著相當(dāng)不錯(cuò)的定制性。

19. The Square Grid

The Square Grid 是一款基于36欄柵格的簡(jiǎn)單CSS框架，這意味著你可以將它輕松等分成18、12、9、6、4、3、2等不同的欄數(shù)，它的總寬度是994px，兼容目前絕大多數(shù)的屏幕。

20. Fluid Baseline Grid

Fluid Baseline Grid 結(jié)合了流動(dòng)性布局的設(shè)計(jì)思路和排版標(biāo)準(zhǔn)，融入了移動(dòng)端優(yōu)先的設(shè)計(jì)思想，這些東西促成了整個(gè)框架獨(dú)立且脫離分辨率限制的特征。它包含了規(guī)范的CSS樣式、漂亮的排版，確保了在常用瀏覽器中一致的視覺效果和良好的可用性。

【往期設(shè)計(jì)圈干貨合集】

一月干貨合集：《干貨駕到！2015年一月設(shè)計(jì)圈干貨大合集》
二月干貨合集：《來(lái)收最新干貨！二月份免費(fèi)設(shè)計(jì)資源+實(shí)用工具大合集！》
三月干貨合集：《月底福利！三月設(shè)計(jì)圈干貨大合集第一波》
四月干貨合集：《四月福利！30+酷炫實(shí)用的免費(fèi)APP設(shè)計(jì)模板》
五月干貨合集：《有好貨！五月必收的優(yōu)質(zhì)設(shè)計(jì)資源干貨大合集》
六月干貨合集：《假期福利！六月設(shè)計(jì)圈高品質(zhì)干貨大合集》
七月干貨合集：《七月干貨！幫你發(fā)掘高素質(zhì)圖標(biāo)的50個(gè)優(yōu)質(zhì)網(wǎng)站》
八月干貨合集：《不要錯(cuò)過(guò)！姍姍來(lái)遲的八月設(shè)計(jì)圈干貨大合集》

原文地址：codegeekz
優(yōu)設(shè)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量101萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com