「教程乾貨」- 想在Sketch里實現響應式網格系統？簡單！- 響應式系列三

大概需要 2 - 4 分鐘閱讀

Sketch團隊最近發布了一項超強功能（39版本），可以讓組或者Symbol實現響應式。

這功能除了常規用法，我還開了個不大不小的腦洞 - 可不可以用它來實現響應式網格系統？

進入正題

首先畫一個120px寬*100%高度的矩形。

我用120px寬主要是因為我將artboard初始設定為1440寬，1440/12=120。不過不打緊，反正網格是響應式的。

現在做間距，每個獨立網格左右的間距分別是8px，也就是說，網格與網格之間的間距為16px。我的體育老師應該感到欣慰了~

把它們合併成組。

將左右兩個間距設定為「Pin to Corner」，這樣它們就會牢牢釘住不會亂動。拉伸網格寬度時，只有網格本身會被拉伸，而間距則不會。

現在拉一下試試。

點擊圖片動起來

現在把這個組變成Symbol。

然後複製11個出來。（複製出1個以後按CMD+D就能快速連續複製了）

點擊圖片動起來

然後把這12個Symbol合併成組。

驚了！我們成功做了個響應式網格！

點擊圖片動起來

哥們，我覺得你應該放縱一下自己，去做個8/16/24的網格試試~??

小貼士：

高度

當你將網格間距選擇了「Pin to Corner」，那麼它的高度只會縮不會長。我覺得沒有人會喜歡只會縮不會長的東西的。

點擊圖片動起來

像素對齊

當你開了像素對齊功能（Pixel-fit when resizing layers），在你調整網格寬度時，Sketch會自動將你的小數點歸為整數。

所以我們調整整體網格寬度時，盡量讓其整體寬度被12整除就好了~

還有一些竅門，and狠貨，比直接拖動網格來得更精準，更容易。

四則運算屬性框

Nudg.it

Nudg.it

Nudg.it可以設定你的微調值，比如默認狀態下，你按住Shift+箭頭，可以增加或減小10px，但它可以讓你更改隨意的值。

點擊圖片動起來

現在你可以想怎麼調，就怎麼調，男人就是應該對自己的微調值做主。

原文地址（需要梯子）：https://medium.com/sketch-app-sources/fluid-grid-systems-in-sketch-3-9-2579133c6d08#.a53ctjq06

原作者（需要梯子）：Anthony Collurafici

譯者：Sketch 素材網

軟廣硬發：更多「Sketch中文教程」及「Sketch優質素材」，盡在 Sketch 素材網 ??????

推薦閱讀：