用 CSS grid 來實作 RWD

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

結果如下:

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。