用于創建響應式網站的17個靈活網格工具和框架

響應式網站擁有一個靈活的流體網格包括響應式圖片。在這個集合，我們收集17個靈活的網格工具和框架，以幫助您創建具有視覺吸引力和功能齊全的響應網站。

Gridpak

Gridpak 的目的是實現了響應式的 Web 頁面設計，提高您的工作流程，節省了時間。通過生成PNG圖像，CSS和JavaScript，，讓 Gridpak 創建響應式的簡單界面。

Gridpak 產生的CSS 兼容 IE 8+，但它使用很多實驗性的CSS屬性，如媒體查詢，盒大小和背景剪輯屬性，所以我們建議您結合 Modernizer 來使用，確保向后兼容性。

Fluid Grids

一個的流體網格計算器建立你自己的流體網格系統。

Golden Grid System

Golden grid system是為增強網頁兼容性設計的折疊式grid。具有四個特征：列、跨頁、底線、script。

Semantic Grid System

LESS框架對CSS語法的改革為更強大的網頁布局方法的到來打下了堅實基礎。而這個強大方法就是The Semantic Grid System框架。它就是CSS網格布局的新星。The Semantic Grid System使用 LESS的CSS方法提供一種新的頁面布局方式.

1. 具備語義特征；

2. 布局方式，既可固定，也可浮動；

3. 可響應的；

4. 允許實時直接在樣式表中修改列寬和列間距。

 

Columnal CSS Grid System

Columnal CSS Grid System由Pulp+Pixels aka的富有創造力的主管Nick Gorsline出品，基于1140px grid system，但是又有一些額外的優點，例如帶草圖框架的開發包和wireframing模板，以及CSS調試方式。

Simple Grid

Simple Grid是又一套12分列的CSS格子框架，并且支持響應式設計。

1140PX CSS Grid

一個偉大的響應式Grid系統是1140px CSS Grid，由Melboume 的設計師Andy Taylor制作，可以從寬的桌面解決方案縮小到移動應用。

Responsive Calculator

像素百分比計算器，但是這個由Stu Robson做的計算器比其他人做的更近了一步，可以為您生成CSS規則，這意味著你只需復制黏貼到你的樣式表就可以了。

320 and Up

Andy Clarke的320 and Up是一款移動優先的模板工具，它繼承了很多流行的web設計工具，比如LESS和Bootstap等。這款工具是個輕量級的敏捷方法，能迅速讓一個站點建立并運行起來。

The Grid

這是一個12列靈活的網格，能夠擴展到任意大小（最大寬度的行定義），也可以方便地嵌套，這樣你就可以建立復雜的布局，創造了很多的自定義元素。

Gridless

Gridless是一個HTML5與CSS3的模板工具，可以作為您的響應時設計的服務基礎，它更關注拓撲以及跨瀏覽器的整合性能。

Responsive Design bookmarklet

Victor Coulon制作了一款簡單有效的書簽工具，它就放進工具欄里面，您可以在任何也免激活它然后您就可以從普通屏幕尺寸和不同的預設尺寸之間切換并且查看區別了。

Adaptive CSS

Adapt.js是一個很小的JavaScript文件，它能夠根據頁面的寬度來加不同的CSS文件。在瀏覽器渲染一個頁面之前，它會檢查其寬度然后決定該調用哪一個CSS文件。

Titan Framework

利用Titan Framework 你可以創建響式布局，它能夠在最大寬度限制下自適應任何屏幕分辨率。

Responsive Grid System

Fluid grid CSS framework用于快速，直觀的開發響應式網站。有12, 16 和 24 列。

Gumby

Gumby 是一個響應式的以及 960 像素寬度的 CSS 網格框架，支持 PC、平板和手機屏幕顯示。類似 推ter 的 Bootstrap，它包括一個Web UI工具包，有好看按鈕，表格，導航+標簽和一個很小的JavaScript文件

Less+ Framework

Less+ Framework 是一個跨設備的CSS網格系統。可以讓設計人員和開發人員能夠根據屏幕分辨率構建適應其內容的網站。