當(dāng)設(shè)計(jì)師把網(wǎng)頁(yè)設(shè)計(jì)稿交給前端開發(fā)人員寫代碼后，頁(yè)面往往與原稿有些偏著。前端人員寫完頁(yè)面后，還需要截圖疊加到設(shè)計(jì)稿上，去看看偏差比率，這是很麻煩的事情。為了解決這個(gè)問題，建議設(shè)計(jì)師和前端人員看看今天分享的 Graaf 柵格樣式工具。

Graaf

Graaf 可以直接在頁(yè)面上顯示柵格線，而且可以自定義柵格結(jié)構(gòu)，大大減少前端或設(shè)計(jì)師檢測(cè)頁(yè)面的煩惱。

產(chǎn)品特色：

1. 直接在WEB頁(yè)面上顯示柵格，方便前端人員實(shí)時(shí)調(diào)整（贊贊贊）
2. 柵格樣式支持多個(gè)流行布局，如：Bootstrap, BBC News, Dribbble, Github, Medium…
3. 支持定制柵格樣式（贊贊贊）

直接在頁(yè)面上顯示柵格線

只需要引入CSS 文件就能直接在頁(yè)面上顯示柵格線，這些既方便查看頁(yè)面錯(cuò)位，又可以實(shí)時(shí)刷新調(diào)整，再也不用一個(gè)個(gè)截圖到設(shè)計(jì)稿了。

<link rel="stylesheet" target="_blank" >

自帶多個(gè)柵格樣式

目前自帶了有10多個(gè)流行的柵格樣式，只需要替換對(duì)應(yīng)樣式表名稱就行，如下圖，如果你需要 Bootstrap 的柵格，就點(diǎn)擊 bootstrap.css 就能看到樣式表鏈接，然后直接嵌入網(wǎng)頁(yè)即可。

自定義柵格樣式（贊）

如果沒有你需要的柵格系統(tǒng)，那么可以簡(jiǎn)單修改 CSS 鏈接就可以自定義柵格線了，比如這個(gè)鏈接：

https://grids.graaf.space/793/10/16.css

793/10/16分別是寬度、列數(shù)、間隔，你只需要修改對(duì)應(yīng)數(shù)值就會(huì)即時(shí)生效，比如設(shè)置為寬度：1200px，列數(shù)：3列，間距：30 px，那么鏈接就這樣改動(dòng)：

https://grids.graaf.space/1200/3/30.css

Taiwan Scenery Gallery

（搭梯子訪問）

而且今天重點(diǎn)介紹 Taiwan Scenery Gallery 這個(gè)圖庫(kù)資源，特色在于圖庫(kù)里的所有圖像均來自中國(guó)臺(tái)灣，所以設(shè)計(jì)師們?nèi)绻胝颐赓M(fèi)的中國(guó)臺(tái)灣照片，這是一個(gè)很好的資源。

據(jù) FLiPER 報(bào)道這是由 2 個(gè)廣告系中國(guó)臺(tái)灣本土女生創(chuàng)辦，她們時(shí)常思考身在中國(guó)臺(tái)灣，有沒有可能為中國(guó)臺(tái)灣做點(diǎn)什么，為中國(guó)臺(tái)灣留下美的記錄？

水稻 | 攝影：裴

最后她們想到了分享免費(fèi)圖像的行動(dòng)，因?yàn)橄矚g照相的中國(guó)臺(tái)灣人很多，而需要照片的人也很多，特別是設(shè)計(jì)師們，這個(gè)行動(dòng)不僅可以幫到需要圖片的人，同時(shí)也在向世界傳播著中國(guó)臺(tái)灣的美。

池上鄉(xiāng)，臺(tái)東縣 | 攝影：Eting

這個(gè)照片資源全部均為中國(guó)臺(tái)灣人提供，但…報(bào)道前還有100多張，而現(xiàn)在小編看了下，只有44張，也許被購(gòu)買版權(quán)了吧。免費(fèi)分享的同時(shí)，攝影師也能獲得額外收入，這也是不錯(cuò)的。

臺(tái)南海安路(已刪)

桃源谷 | 攝影：Eting

澎湖西嶼（已刪）

澎湖湖西

新竹柿餅 | 攝影：范育銓

雖然目前只是很少的相片，但我們報(bào)道后，也會(huì)有不少人的參與進(jìn)來，未來她會(huì)繼續(xù)成長(zhǎng)，敬請(qǐng)關(guān)注。

「優(yōu)設(shè)最新神器推薦」

1. 《這款圖標(biāo)神器，讓你體驗(yàn)用完即走的暢快感》
2. 《超過5萬張！免費(fèi)高清可商用圖庫(kù)ZOOMMY 3.0重磅來襲！》
3. 《超好用的PS字體管理插件FONTAGS（附安裝方法）》

原文地址：shejidaren

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.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ì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬的人氣微博@優(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