用 CSS grid 來實作 RWD

css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code:

https://gist.github.com/snailsmall612/997012803bc4803276fa23416fa05f6c

結果如下:

width 1200px:

width = 1200px:

width = 800px:

width = 400px:

接著刻意讓第三個框框高度設為400px，畫面結果如下:

可以看到第二列的格子並不會往上補滿空隙~

使用bootstrap可以達到一樣的效果，差別在於bootstrap的html會比較複雜，css grid的html簡潔很多。另外，css grid的自由度很高，可以自定義break point來佈局排版，比較不會被框架限制住，雖然bootstrap 5 也有提供透過scss變數來調整break point，但個人還是比較喜歡使用css grid，至少不用為了grid system引入一大包bootstrap。

本筆記參考: 1. https://muki.tw/tech/css-grid-note/ 2. https://medium.com/enjoy-life-enjoy-coding/css-%E6%89%80%E4%BB%A5%E6%88%91%E8%AA%AA%E9%82%A3%E5%80%8B%E7%89%88%E8%83%BD%E4%B8%8D%E8%83%BD%E5%A5%BD%E5%88%87%E4%B8%80%E9%BB%9E-grid-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-cd763091cf70 3. https://dev.to/sterlingperry/bootstrap-vs-css-grid-2j7p