2018年8月3日 星期五

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) 這樣。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...