Grid 格子列表之 CSS 前製規劃 (上)

去年開始小妹立志要朝有數字根據的理性使用者分析來做介面，開始重視網站相關的所有數據，真的獲益不少呢！昨天分享的 比賽列表介面 A/B Test 目前已有初步結果，但取樣數還是不夠，下星期再把結果分享給大家。今天想做一下 Layout 規劃筆記。

在重新設計獎金獵人的時候，寫 SASS (CSS) 前花了不少時間做全站整體規劃。尤其站內除了「比賽」之外，新加了「作品」，而「比賽」和「作品」在 Grid 顯示底下有不同設計，因此花了些時間計算出每個 item 的寬度以及 item 之間的間距，並讓不同寬度總寬度都符合 980px。

在做 Grid 格子狀顯示的時候，因為希望左右可以完全貼齊總寬度，讓整體視覺更飽滿平衡，所以寬度的計算裡 margin 必須少算一次，才能達到 one pixel matters 的境界。很多網站的作法是把期望的間距除以 2，然後分別設定每個 item 的左右 margin。但這樣一來左右就不能貼齊總寬度了。當然，這是不同的設計風格。像是 mobile01：

如果沒有計算好，左右的間距還會不平均。一般人可能不會在意，不過在我前端龜毛魂大起之時，這實在是不能容許。像 Dribbble 就很漂亮。左右有貼齊到總寬度，整體看起來很平衡舒適。（點圖有 thickbox 放大）

Hum Creative 也是很平衡地左右滿版。

Pinkoi 版面也是舒適平衡。

Fandora 也是舒適漂亮的滿版。

拿計算機做 Layout 規劃

拿出計算機，整站的總寬度先設定為保守的 980px ，如果一列希望有五個 items，不能 980 除以 5，必須先把希望的間距寬度設計好，把 980 減掉期望寬度乘以 4 之後，再除以五才是正確的。

不過因為小妹數學不是很好，只能自己慢慢試出這樣的公式。還望各位數學魂靈動的大家，若有更快速的算法，請不吝教教小妹。

我的公式是這樣的：
總寬度 – 間距x(單列格數-1) / 單列格數 = 單格寬度

所以獎金佈告原始的設計是這樣：
（ 980 – 15×4 ）/ 5

而算出一格的寬度是 184px。這樣比賽資訊列表可以順利的滿版。
（見此：http://bhuntr.com/contests）

因為像素不能有小數點，所以如果算出來的結果有小數點，就必須改變期望間距的寬度。

比如說，在作品列表頁面，作品重視圖片，應該要比較大，所以同樣總寬度底下，每列的 item 數量不相同，也就是同樣的總寬度我希望作品列表一列 4 個 items，每個之間的間距在 10px 上下都可以，先這樣計算。
（ 980 – 10×3 ）/ 4 = 237.5

但因為有小數點所以不行，所以修改間距大小到 9。
（ 980 – 9×3 ）/ 4 = 238.5

還是有小數點，繼續嘗試
（ 980 – 11×3 ）/ 4 = 236.75

最後修改間距成為 8 ，成功得到滿版結果。公式是這樣的：
（ 980 – 8×3 ）/ 4 = 239

作品集顯示結果為如下：
（http://bhuntr.com/garden）

CSS3 用法

計算好之後，就可以開始寫 SASS 啦！剛才說的滿版的方式，寫法是每個項目都 margin-right，只有「單列格數」的倍數 margin-right 為 0。會用到 CSS3 的 :nth-child() Selector，請參閱：

http://www.w3schools.com/cssref/sel_nth-child.asp

如果網站大宗使用者的瀏覽器都還不夠新潮，就只能用程式在每個 item 加上編號，再在 css 指定某個倍數的 margin-right 為 0。