分享響應式CSS柵格系統

相關推薦

分享響應式CSS柵格系統

　　柵格系統這種東西和許多同類工具/素材一樣，“系統”二字讓它看起來無比高大上，而實際上大多數的柵格系統只是一系列縱橫交錯的細線構成。很簡單?看起來確實如此。不過它之所以被冠以“系統”二字，主要還是因為這些線條所涉及的內容管理方式、梳理頁面結構的功能。柵格系統的運用會促使你的網頁內容逐步走向規則化，實現一致性的設計。下面的20款CSS柵格可以更好地運用到網頁開發實踐中去，賦予你的網站以調理性。

　　1. ChewingGrid

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

　　2. Motherplate

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

　　3. Lemonade

　　Lemonade 是一款簡單靈活且易于定制的柵格系統，它是為設計師和開發者而設計的，便于他們定制屬于自己的新項目。目前這套柵格系統兼容Chrome、Firefox、Safari、Opera和IE9+。其中預制了12欄，當然你可以定制并增加更多。

　　4. Reverie

　　Reverie 框架是一款基于ZUBR Foundation 的強大的HTML5 WordPress 框架。ZUBR Foundation 是一個強大的原型工具，以它為基礎來制作框架自然不會差，而Reverie 本身確實從中繼承了不少強大的功能。

　　5. Jeet

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

　　6. 1KB Grid

　　1KB Grid的設計靈感來自于1KB CSS柵格系統，這套基于SASS的柵格系統移除了HTML中多余的類，讓它更靈活也更加易于定制。當然，1KB Grid 并非嚴格意義上的1KB大小，新版的1KB Grid已經可以制作流動性更強的柵格。

　　7. Unsemantic

　　Unsemantic 是一款流態柵格系統，基于960柵格系統演化而來。它們的工作原理很接近，但是Unsemantic 更加靈活，可以基于百分比來設定。

　　8. Bourbon Neat

　　Neat 是一款在Sass和Bourbon的基礎上建立的語義柵格系統。它足夠簡單又功能強大，能在幾分鐘內配置好運行起來，足以應付任何響應式布局。

　　9. Herow

　　Herow 是一款省時省力的柵格系統，內置混入組件易于定制，可以處理各種各樣的響應式的問題，并且能夠和CSS輕松聯動。

【分享響應式CSS柵格系統】相關文章：