[筆記] 使用 CSS Grid 來做 RWD 排版

​
Mar 17 · 5 min read

雖說很早以前就聽過 CSS Grid 這詞,但當時對 Bootstrap 信仰充值過高,所以一直沒有機會來認識一下這傢伙,直到最近在開發上因為沒套用 CSS framework 而為了排版苦惱時仰天一望,看到了天上的雲朵有那麼一瞬間排成了 「CSS Grid」似乎在暗示著什麼


何謂 CSS Grid

在開始之前不免俗的要介紹一下這是什麼,簡單來說就是 grid system 的一種,如同 Bootstrap grid system,我們可以在 container 底下排列 rowcol

而 CSS Grid 也是如此,透過賦予 container display: grid 以及下列各種 css property 來做設定:

grid-template-columns
grid-template-rows
grid-template-areas
grid-area
grid-gap

當然不只這些 property ,詳細請參考 MDN CSS Grid Layout,而使用教學的部分可參考下列文章,就不多贅述了。


使用情境一:照片牆/商品卡

若是要實作一個類似購物網站陳列商品卡的頁面,或像是 Instagram 個人頁面的照片牆,我通常會使用 Bootstrap 並針對不同尺寸螢幕設定商品卡/照片的 col-* 來做排版,像是:

但如果想要 item 間有間隔 (.ProductList__item { margin: 5px;}) 但最左邊和最右邊又不想要有 margin,又或是沒有 Bootstrap 可以使用,事情就變得不像憨人想的那麼簡單了。

不過有了 CSS Grid,憨人又可以繼續當憨人了,

首先幫 container 加上 display: grid ,再透過 grid-template-columns 來定義每一列的有幾個 column 以及所佔寬度/比例,並使用 media query 去處理在不同螢幕寬度下的 grid-template-columns 設定,最後再加上 grid-gap 讓 item 間有所空隙就大功告成了。


使用情境二:table 在窄螢幕的呈現排版

雖然 Bootstrap 本身對 table 就提供了 responsive設計,但在小螢幕上 (如手機) 要讓使用者左右滑動表格才能完整瀏覽某一筆資料在 UX 上確實不是很好,而其中比較常見的處理方式是使用 Card 的形式來解決,讓我們用 CSS Grid 來實做看看吧:

在這個例子中可以看到當寬度大於 820px 時購物車會以 table 形式呈現,反之則用 card 做處理。

首先先將 .Cart__header.Cart__product 設為 grid 並設定 grid-template-columns 排列出像是 <table /> 的樣式

再透過 media query 讓寬度小於 820px 時使 .Cart__header 消失並且利用 grid-template-areas 重新組合 .Cart__product 底下的元素

最後再把 .Cart__product 底下元素一一設定對應的 grid-area 基本上就完成了


此篇僅是隨手紀錄與分享個人使用 CSS Grid 的經驗,請鞭小力,如果你喜歡可以拍 10 次手,如果你不喜歡可以拍 1 次手或分享給 5 個人,最後謝謝你的觀看。

​

Written by

YY​ ​-​ ​ʟ​ᴠ​.​ ​1​3​ ​見​習​前​端​ ​I

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade