如何利用CSS3原生網格系統快速排版
相信大家很習慣用Bootstrap的網格系統來排版，幾乎不用自己寫css，只要依照Bootstrap所定義，邊寫HTML標籤即可快速完成排版。
CSS3也有原生地網格系統，過去沒有被廣泛應用最大的原因莫過於瀏覽器支援性的問題，但現在IE11也支援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＞
首先，我們要先把要作用的區域設為display:grid
最簡單的作法設定欄的寬度:
grid-template-columns：50% 50%;
上圖顯示的結果 所有區塊都變成寬度50%。
第二種方法設定欄寬:
Grid-template-columns:2fr 1fr 2fr;
如上圖我們可以看到，欄的寬度變成2/5 1/5 2/5 ，不須自己計算百分比。
可以用重複的方法建立欄寬:
Grid-template-columns:repeat(2,1fr 2fr);
我們可以從顯示結果看到，在一行中重複了兩次1/3欄和2/3欄。
可以命名一個區塊然後引用它：
#detail{
grid-area:detail;
background:pink;
}
#subDetail{
grid-area:subDetail;
background:green;
}
.grid-box1{
grid-template:"detail detail detail subDetail";
}
如上面的示範 我們定義 #detail和#subDetail，然後引用我們定義的名稱，這時區快就會變成3/4detail 和 1/4subDetail。
我們也可以直接用格線定義欄寬：
#detail2{
grid-column:1/3;
background:pink;
}
#subDetail2{
grid-column:3/5;
background:green;
}
grid-column:1/3和3/5 的意思分別是從第1條格線到第3條和第3條到第5條的範圍，所以顯示的結果是50% 50%的欄寬。
也可以用span來定義欄寬，上面示範是1格和3格的範圍，所以顯示"five" 的欄寬為25% ，”six”欄寬為75%。
以上是對CSS3 grid系統的基本介紹，很方便就能排好想要的基本版型喔，想知道更多關於電商的知識，別忘訂閱歐斯瑞電子報和追蹤我們的粉絲專頁喔！
我要留言