grid支援度:Can I Use)
在還沒學會grid以前,排版都會使用flex,有了grid可以解決很多很特別的排版,讓我們來看看吧~
grid
是CSS中一種格線佈局模式,可以用來寫複雜且可響應式的佈局。grid
將網頁分為一組水平和垂直的線,稱為軌道 (track)。元素可以放置在這些軌道中,形成網格。fr
,fr
就是為了格線布局而生。如要開始試試看grid
,需先將dispaly設定為grid
/ inline-grid
。
display:grid;
屬性 | 介紹 |
---|---|
grid-template-columns |
指定網格的列數和寬度,也可以使用minmax(min,max) 控制區塊最小值最大值。 |
grid-template-rows |
指定網格的行數和高度,也可以使用minmax(min,max) 控制區塊最小值最大值。 |
grid-template-areas |
可以單獨定義每一格,但區塊要連續,且使用. 可以代表空白區塊。 |
grid-column-start , grid-column-end |
指定元素在列中的起始位置和結束位置;可以簡寫為grid-column:start / end ,也可以使用 span <number> 代表佔了幾個欄位(span)。 |
grid-row-start ,grid-row-end |
指定元素在行中的起始位置和結束位置;可以簡寫為grid-row:start / end ,也可以使用 span <number> 代表佔了幾行(span)。 |
grid-area |
grid-column +grid-row 的簡寫,row start/column start/row end/column end 。 |
grid-auto-rows |
適用於每列高度一樣的排列,只要設定高度,就可以自動套用於每一列。 |
grid-auto-columns |
適用於每行寬度一樣的排列,只要設定寬度,就可以自動套用於每一行。 |
grid-auto-flow |
資料流動排列的方向,有columns 和row 兩個值,預設值是row 。 |
grid-row-gap ,grid-column-gap |
行和行與列和列的間距,也可以簡寫為grid-gap 。 |
像是昨天介紹flex-gap範例,試著用grid寫寫看:
#app{
display:grid;
gap:10px;
grid-template-columns: repeat(3,1fr);
}
比flex更輕鬆的是可以利用grid的新單位fr
,搭配repeat()
就不用特別去設定子元素的寬度~
來示範一個常見的layout
.layout{
width:100%;
height:100%;
display:grid;
grid-gap:5px;
grid-template-columns: 200px auto;
grid-template-rows: 60px auto;
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content content";
}
header{
background:pink;
grid-area:header;
}
aside{
background:red;
grid-area:sidebar;
}
section{
background:green;
grid-area:content;
}