- 相關(guān)推薦
分享響應式CSS柵格系統
柵格系統 這種東西和許多同類(lèi)工具/素材一樣，“系統”二字讓它看起來(lái)無(wú)比高大上，而實(shí)際上大多數的柵格系統 只是一系列縱橫交錯的細線(xiàn)構成。很簡(jiǎn)單?看起來(lái)確實(shí)如此。不過(guò)它之所以被冠以“系統”二字，主要還是因為這些線(xiàn)條所涉及的內容管理方式、梳理頁(yè)面結構的功能。柵格系統 的運用會(huì )促使你的網(wǎng)頁(yè)內容逐步走向規則化，實(shí)現一致性的設計。下面的20款CSS柵格 可以更好地運用到網(wǎng)頁(yè)開(kāi)發(fā)實(shí)踐中去，賦予你的網(wǎng)站以調理性。
1. ChewingGrid
ChewingGrid 是一款卡片列表風(fēng)的CSS柵格 ，通�？梢杂糜谝曨l、磁貼、文本等各種類(lèi)型的網(wǎng)頁(yè)元素。在使用ChewingGrid的時(shí)候無(wú)需媒體查詢(xún)，你需要控制的是列的數量，最大和最小寬度。設定的時(shí)候可以直接使用默認的柵格 ，也可以自定義。
2. Motherplate
Mother plate 是一款基于HTML5、CSS3和SCSS的響應式模板，它不包含視覺(jué)組件，僅在CSS中幫你控制一切。
3. Lemonade
Lemonade 是一款簡(jiǎn)單靈活且易于定制的柵格系統，它是為設計師和開(kāi)發(fā)者而設計的，便于他們定制屬于自己的新項目。目前這套柵格系統兼容Chrome、Firefox、Safari、Opera和IE9+。其中預制了12欄，當然你可以定制并增加更多。
4. Reverie
Reverie 框架是一款基于ZUBR Foundation 的強大的HTML5 WordPress 框架。ZUBR Foundation 是一個(gè)強大的原型工具，以它為基礎來(lái)制作框架自然不會(huì )差，而Reverie 本身確實(shí)從中繼承了不少強大的功能。
5. Jeet
Jeet 是一款市面上相對先進(jìn)、設計直觀(guān)的柵格系統，你可以將它視作為Semantic.gs 的理念繼承者。借助強大的預處理功能，你可有使用真正意義上的百分比來(lái)設計柵格系統，這也意味著(zhù)你可以按照客戶(hù)的描述直觀(guān)快速地設定柵格，沒(méi)有嚴格的12列柵格的限制，你可以更加快速的設計，使用更少的代碼來(lái)搞定一切。
6. 1KB Grid
1KB Grid的設計靈感來(lái)自于1KB CSS柵格系統，這套基于SASS的柵格系統移除了HTML中多余的類(lèi)，讓它更靈活也更加易于定制。當然，1KB Grid 并非嚴格意義上的1KB大小，新版的1KB Grid已經(jīng)可以制作流動(dòng)性更強的柵格。
7. Unsemantic
Unsemantic 是一款流態(tài)柵格系統，基于960柵格系統演化而來(lái)。它們的工作原理很接近，但是Unsemantic 更加靈活，可以基于百分比來(lái)設定。
8. Bourbon Neat
Neat 是一款在Sass和Bourbon的基礎上建立的語(yǔ)義柵格系統。它足夠簡(jiǎn)單又功能強大，能在幾分鐘內配置好運行起來(lái)，足以應付任何響應式布局。
9. Herow
Herow 是一款省時(shí)省力的柵格系統，內置混入組件易于定制，可以處理各種各樣的響應式的問(wèn)題，并且能夠和CSS輕松聯(lián)動(dòng)。
【分享響應式CSS柵格系統】相關(guān)文章：
響應式網(wǎng)頁(yè)設計10-31
什么是響應式布局08-19
響應式網(wǎng)頁(yè)設計技巧10-09
響應式網(wǎng)站布局設計09-13
響應式網(wǎng)頁(yè)設計的技巧06-25
響應式網(wǎng)頁(yè)怎么設計09-07
響應式設計災禍有哪些10-02
響應式網(wǎng)站該如何設計10-16