CSS 排版演進的啟發

August 5th, 2020

CSS 排版經驗歷程

過去的排版: 畫面流

過去,在尚未有 flex 的時代,我們通常需要把握傳統 display 的 inline, block, inline-block 等,搭配 position 的 relative, absolute 來針對畫面由上而下、由左而右的方式,來針對畫面流來完成畫面的排版規劃,屬於比較線性的排版方式去思考及應對我們所遇到的設計畫面。

我不想提到 table 的黑歷史...XD

flex: 縱軸、橫軸的流動

到了後來 flex 出現之後,我們開始有了更大的彈性去思考: 如何切割畫面,並且透過父節點 flex 系統的設定,來達成子節點們在縱向與橫向之間的排版關係。因此排版又進一步跨越了上述的畫面流,進入了 節點層級安排與縱軸、橫軸之間的畫面流掌控,並在適當時機利用傳統的定位模式,去做更多彈性的畫面結構實作。

當然,就商業立場角度,其實已經解決很多需求面的問題,也幾乎可以涵蓋到所有的需求面向,也是我們樂見其成的演變,畢竟彈性與支援度就是前端切版最大的利器。

福音: Grid System 出現

直到 Grid 出現以後,前端切版的彈性上可以說是多出了一大福音。我認為跟 flex 比起來最大的差異,就是跳脫上述說到對於縱軸、橫軸之間的畫面流掌控。

當我們在父節點進行 grid 相關定義後,我們進入了一個二維領域,來針對畫面來將二維做基本的先切割,建立出對當前設計定義的、具宏觀性的網格架構。接著我們便在子節點上去定義 Grid 概念中的 grid-area (或 grid-column、grid-row),子節點就這樣美麗地落在我們想要的座標上,看似簡單不起眼,但對我來說,這如🔱神一般的存在🔱!

為何值得為 Grid 感動?

從剛剛提到在 flex 架構以前的排版策略,在思考切版上總是逃離不了線性畫面流的思維,但是 Grid 的出現令我想起了像是情緒板 (Mood Board)的概念;或更具體來說,當我們設定父節點為 grid 後,它賦予我們一張能夠擺放各種作品元素的桌子。我們便可以很隨興地在這樣的網格桌子上,親手擺上我們想要的元素,想想這與過去相比,是何等的浪漫形式~~ (圖片來源: https://visi.co.za/bathroom-design-inspiration-bathroom-butler-x-heid-interior-design-mood-board/)

更值得一提的是,我們依舊能夠透過 z-index、position、justify-self,甚至是 flex,在子元素自己的 grid-area 中恣意地擺放他所想要的位置,並且子節點之間在某種層度上是不互相影響!也因此能夠更專注地去跟設計師討論更抽象層的如:畫面布局、美感體驗的範疇,我們與設計之間又更靠近了一步🤟。

我認為的小小瓶頸

如果真要像前述一樣的感動,則前提當然是在前端工程上,要有足夠的 CSS 定位認知,並且能夠確切掌握設計師們想要的形狀與 fallback layout。但相對的,由於設計師們是透過很多經驗與研究完成畫面需求,而經驗來自當下與過去,對於 grid 概念與實作通常是不透明的;當想要利用 Grid 去實現需求時,或許需要用更謹慎的角度去斟酌 :

  • 推坑計畫: 設計師一同來體驗美麗的 Grid 系統🥋。
  • 換位思考: 必須確認設計師對整體畫面的想法。
  • 懶惰為上策 畫面在 columns 與 rows 的切割上是否會造成太複雜的網格架構,畢竟太複雜的格線我認為不是和提供 RWD 實作一個好的環境前提 (我認為如果答案是肯定,則需要慎行,我ok、你先上)。
  • 承上,或許可以切割成更小的 Grid,或做局部的 Grid 實作。但是依然需要考量複雜度。
  • 天無絕人之路: Grid 搭配 flex 或許更無敵。
  • 反向思考: 畫面的 RWD 機制,是否能夠透過 Grid 完美呈現?!

Grid 與設計的連結

最近也時常透過 Pinterest 吸收許多 Geomatric pattern, Elemental Typography, Bauhaus 的概念,從這些設計的語法中其實可以嗅到許多 Grid 系統的味道,是一件令人興奮的事!^^

(圖片來源: https://magazine.artland.com/bauhaus100-exhibition-highlights-2019/)

同時,也反思現今網路商業應用崛起對設計所帶來的影響,網頁排版似乎某個層度上也構成了一定的公式,瀑布式形象網站、網格式的店商服務網站、F 形排版的官網等;雖然這不是甚麼壞事,畢竟它提供了某些商業或其他性質網站的畫面需求,並且有一定的歷史驗證其視覺傳達效果。

但我們必須試著以開放的角度去面對畫面,以及用更廣大的架構美感來展現網頁設計的可能性,前端工程也因此要用更開放的態度去面對接踵而來的設計需求挑戰,網頁形式才能更多元、更美,Grid 或許就是一個可能的出口。

結論

Grid 在某隔層度上已經實現了排版解放的思維,擁抱不對稱、開放的語法去支持更多平面設計的可能性,相信也希望未來在許多概念傳達的官網上可以看到更多類似的設計出現。同時也希望未來的網頁排版會有更多元的形式展現,而不再是很條列式、格狀的排版形式。

在閒暇之餘,我也透過 grid 小試了一下非對稱性的排版,概念導入從 David Airey 的文章中擷取了畫面的概念元素進行實作,並且 Grid 也有實作 Responsive ^^

當我正式踏入 Grid 的氛圍後,感覺就像是在畫面上很直覺地擺放元素,整體開發感覺是舒服的 XD 另外如果要有好的開發體驗,建議可以使用 Firefox,其對於 Grid 網格的顯示相對於 Chrome 來說是清楚許多的唷!

🔗觀看成果

wjy grid test snapshot

任性宣言: 因為身為前端,所以值得不顧一切勇敢嘗試 (x)

參考資料