CSS 的 grid Layout 教學(1)

grid 也出來好一陣子了，瀏覽器也陸續支援，跟以往的排版觀念差很多我不大習慣，不過先筆記一下之後再視情況用看看好了。

最基本的 grid，用 display: grid 把排版方式設為 grid，接下來的 grid-template-columns 是設定 grid 的寬度，可以設固定值，也可以設成 auto 後會自動分散填滿空間。



設定欄位高度使用 grid-template-rows



grid 分為 gird 和 inline-grid，可以看得出來設為 grid 時會自動填滿母層的空間，inline-grid 則是看你裡面東西寬度有多少就撐開多少。



可以用 grid-column-gap 設定左右間距或用 grid-row-gap 設定上下間距，或是合併成 grid-gap，合併寫的第一個值為 row 的間距，第二個值為 column 的間距。



fr: grid 後引進了新的單位 fr，這個單位會去依據每一行或列的總數，再去依據自己佔的數字取得比例，比如有一行是 1fr 2fr 3fr，那第一個就是 1/(1+2+3) 這樣。