利用 css 排版頁面的新方法, 除了 flex 外, 還有 css grid 排版方式, 以常見的 header, sidebar, content, footer 來看, 我們可以這樣進行:
先定義外面的 div.conatiner 為 display: grid;
再來依序在該 container 中新增 4個 div 分別為 header, sidebar, content, footer.
我們希望 siderbar 與 content 比例為 1:4 所以在 div.container 設定 grid-columns-template: 1fr 4fr; (這裡的 fr 是 fraction)
不過因為 header 與 footer 都是全寬, 所以需要指定為 column 的起始位置, 所以加上 grid-column: 1/3; (這裡是指從 line 1 ~ line 3, 因為共兩欄, 所以會有三條縱線)
來看看 example 吧: https://codepen.io/timhuang/pen/xxdayNW
目前的 modern browser 都可以支援, 可以參考 caniuse 資料:
https://caniuse.com/?search=grid-column
繼續閱讀:
https://dev.to/cenacr007_harsh/complete-introduction-to-css-grid-2ffh