CSS, CSS3, 網頁設計

[教學] CSS3 Grid 原生網格系統,讓版面編排更靈活

梅干2018/04/20
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
  一直以來梅干相當習慣使用Bootstrap來設計網頁版型,最主要的原因就在於Bootstrap的網格系統相當的方便,也相當的好用,當在切版時,幾乎不太需要寫到CSS,只需要依照Bootstrap所定義的樣式規範,編寫HTML標籤,就可快速的將版面編排完成,同時還具備RWD自適應的效果,可以大幅的縮減網頁切版的工時與流程,但隨著Bootstrap升級,也將原先3.0的網格,更改為flex,讓在網頁排版時,更加的靈活,甚至也決解網頁區塊高度不一時,所造成跑版的問題。
  而除了flex外,CSS3原生也有網格系統Grid,但一直未被廣為使用的原因就在於,當初支援Grid的屬性瀏覽器並不多,但時已至今幾乎所有新一代的瀏覽器都支援了,甚至就連IE 11版也支援Grid的語法,因此就引起梅干的興趣,玩了一下發現CSS3 Grid真是一個好物,讓網頁編排變得更簡易,同時也讓版面編排更靈活,因此想了解CSS3 Grid這屬性對網頁編排有多方便,現在就一塊來看看吧!
Grid屬性
grid-template-columns:網格區塊寬度
grid-template-rows:網格區塊高度
grid-template-areas:網格區塊名稱
grid-column-gap:網格區塊左右間距
grid-row-gap:網格區塊上下間距
grid-column:指定網格左右的位置,ex:<start-line(起)> / <end-line(尾)> | span<value>
grid-row:指定網格上下的位置,ex:<start-line(起)> / <end-line(尾)> | span<value>

首先,從這張表可看到,幾乎所有的瀏覽器都支援了,除了Oprea Mini。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
而在Grid這語法中,grid-template-columns、rid-template-row,這二個屬性最為重要,一個指的是行,另一個是列,因此只要搞懂行列後,接下來就很容易上手啦!
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
在要開始用之前,需先將display設為grid,接著grid-template-columns後方可設定區塊的寬度值,若設為50% 50%表示一列有二欄,各50% 50%若要切成三欄式,也可寫為10% 80% 10%,這樣就會變成左右各10%,中間是80%,這樣是不是很方便呀!甚至當要設定間距時,只需使用grid-column-gap、grid-row-gap。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
除了用百分比外,還多了一個新的單位為fr,而fr是用分子跟分母的概念,因此沿續上一個範例,就可寫成1fr 1fr,就是變成各1/2的意思。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
當要分割成四等分時,就可輸入1fr 1fr 1fr 1fr四次。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
除了重覆打四次外,甚至也可用repeat(重覆次數,單位)。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
除了等分外,也可分割成1/4或3/4,這時可用grid-template-areas來作規範,當3/4就重覆三次,這時區塊就會變成3/4 content,而1/4是sidebar。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
除了用grid-template-areas,也可指定分割比例,當要選擇區塊一到三,則是用條來計算,所以就是1/3,從1開始到3,所以就是區塊二個區塊的意思,除此之外也可使用span,span代表包含的意思,假設一次要顯示2個,就可寫span 2,這樣就是一次使用2個區塊的意思,到這邊是不是有感受到Grid的方便啦!而梅干也簡單了寫了幾個小範例,各位可以看一下範例,更容易理解。
梅問題-[教學] CSS3 Grid Layout 原生網格系統,讓版面編排更靈活
#範例1

#範例2

梅問題講堂-2018/5/26-WordPress佈景主題設計入門-實體課程