在這篇文章中,，我們?yōu)槟尸F(xiàn)了一組優(yōu)秀的網(wǎng)格工具清單,。如果我們錯過了任何沒有列出在這個清單上的東西，請分享給我們,。如果網(wǎng)頁設(shè)計和開人員采用了正確的工具集,，并基于一個靈活的網(wǎng)格架構(gòu),，以及能夠把響應(yīng)圖像應(yīng)用到到設(shè)計之中，那么創(chuàng)建一個具備響應(yīng)式的網(wǎng)站并不一定是一項艱巨的任務(wù),。

Bootstrap

這是一個圓滑的,，直觀的和強大的移動優(yōu)先的前端框架，用于更快,，更容易的 Web 開發(fā),。幾乎一切都已經(jīng)被重新設(shè)計和重建，更好的支持移動端設(shè)備,。最新的 Twitter Booststrap 包含四層網(wǎng)格類??——手機,，平板電腦，臺式機,，和大型桌面,，你可以做一些超級瘋狂的布局。

Flurid

Less Framework

LESS 是一個輕量級的 CSS 框架,，使您能夠建立靈活的多列布局的網(wǎng)站。它包含一個八列網(wǎng)格,，根據(jù)黃金比例平行于網(wǎng)格的垂直鼓組排版預(yù)設(shè)的行高進行了優(yōu)化,。

Baseline

Baseline 是一個 CSS 框架，基于排版標(biāo)準(zhǔn)建立,，其目的是簡化開發(fā)一個可喜的網(wǎng)格和良好的排版網(wǎng)站,。借助 reset.css & base.css 文件的幫助下，基線清除瀏覽器的默認(rèn)行為和建立一個基本的排版??布局,。

Gridless

Gridless 是一個樣板,，用來創(chuàng)建響應(yīng)式和跨瀏覽器，具有漂亮的印刷字體平臺網(wǎng)站,。它不與任何網(wǎng)格系統(tǒng),，而是重點是漸進增強并成為任何項目的一個起點。

The Semantic Grid System

語義網(wǎng)格系統(tǒng)是一個新的方法用來定義列列間距,，選擇列數(shù)和像素和百分比之間切換,。

Columnal

Columnal 是另外一個 CSS 網(wǎng)格系統(tǒng)。Columnal 是彈性網(wǎng)格,，而一些代碼的靈感來自于 960.gs 網(wǎng)格系統(tǒng),。Columnal 使得響應(yīng)原型更容易一些。

978GS

978是使用12列的54px ，列間距30px的網(wǎng)格布局系統(tǒng),，這一共就是978px ,，在1024 × 768的顯示器上剛好使用了大部分的空間。

One % CSS Grid

One% CSS網(wǎng)格是有12列流體的 CSS 網(wǎng)格系統(tǒng),。它被設(shè)計為建立響應(yīng)式的網(wǎng)絡(luò)布局,，方便，快捷,。您不必采取調(diào)整大小和你的每個平臺分別布局重新處理。

Grid System Generator

網(wǎng)格系統(tǒng)生成器是一個網(wǎng)站,，只需要輸入網(wǎng)格的寬度,，列數(shù)，創(chuàng)建一個固定的網(wǎng)格系統(tǒng),。除了 CSS 框架,，還會身材 png 格式的背景文件，用于在原型開發(fā)和設(shè)計提供幫助,。 

您可能感興趣的相關(guān)文章

本文鏈接：幫助你創(chuàng)建響應(yīng)式布局的10款優(yōu)秀網(wǎng)格工具集錦

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源