希望運用CSS Grid語法,讓網頁最終布局達到如下圖的效果↓↓↓
效果示意圖.jpg

這布局主要是由外容器(wrapper)包覆著六個內元素組合而成,所以結構為:
 

需將外容器定義成Grid網格,所以設置屬性值為:
 

接著,我希望外容器是寬600px、高600px,且其內為3x3的欄(column)與列(row)配置,但欄間距為10px,共有三欄,所以外容器的寬度加總應為620px;另外,列(row)也是間距10px,共三列,所以高度也需加總進去:

然後,就個別的內元素做分別的欄列設置,如編號1的方塊為兩欄一列,所以寫成:
step_04.jpg

編號3的方塊為一欄兩列,則寫成:
 

將六個方塊一一地定義好之後,因方塊內文字為垂直水平置中,所以需將方塊設置為:
step_06.jpg

再對文字下定義,就會變成我想要的效果了!

【註】:圖文有誤且又因系統忙碌難上傳,整理未完待續...

文章標籤

Lainie 發表在 痞客邦 留言(0) 人氣()