CSS 的 grid 教學(3)- grid-template-areas

可以使用 grid-template-columns 和 grid-template-rows 將版面分割為這樣



然後設計好各個區塊的樣式，再利用 grid-template-areas 依序指定每一個區塊想要用哪個樣式，就可以把版排好了。




當版面安排好之後，就可以把內容填進去了，是不是跟以往排版的觀念差很多呢?



最近我很多專案都用 flex 排版了，gird 看起來有他方便的地方，目前也還未知到底哪個比較好，不過多學點總是在專案上有遇到問題就可以用比較好或熟悉的方式來解決。

反應：