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

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

偷偷工商一下這個以 CSS grid 打造的 carousel react-grid-carousel
GitHub: https://github.com/x3388638/react-grid-carousel
Demo: https://react-grid-carousel.now.sh/
喜歡的話歡迎 Star 🌟 & 分享

何謂 CSS Grid

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

而 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，而使用教學的部分可參考下列文章，就不多贅述了。

• https://muki.tw/tech/css-grid-note/
• https://wcc723.github.io/css/2017/03/22/css-grid-layout/
• https://blog.techbridge.cc/2017/02/03/css-grid-intro/
• https://css-tricks.com/snippets/css/complete-guide-grid/

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

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

Demo 1 (Bootstrap)

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

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

Demo 1 (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 來實做看看吧：

Demo 2 (CSS Grid)

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

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

.Cart__header {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  grid-gap: 2px;
}
.Cart__product {
  display: grid;
  grid-template-columns: 2fr 7fr 3fr 3fr 3fr 3fr;
  grid-gap: 2px;
}

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

@media screen and (max-width: 820px) {
  .Cart__header {
    display: none;
  }
  .Cart__product {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 1fr;
    grid-template-areas:
      "img title title title title title del"
      "img price price quantity total total del";
  }
}

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

.Cart__productImg {
  grid-area: img;
}
.Cart__productTitle {
  grid-area: title;
}
...

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