CSS gird 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思),開始之前還是來介紹一些語法。
與 CSS Flex 一樣,CSS Grid 用兩個部分來看比較快,一個是屬於外部容器的屬性,另一個是屬於內部容器的屬性;從外開始向內看可以加快理解的速度。
CSS Grid 可以做什麼呢?這邊提供一個簡單範例給大家看看,相同的 Grid System 如果使用 float 需要多很多層,還要注意清除浮動等等。在 CSS grid 的加持下每個 class 都僅需少量的屬性就可做到相同的效果。
See the Pen CSS Grid Layout by Wcc723 (@Wcc723) on CodePen.
本篇內容有許多參考 https://css-tricks.com/snippets/css/complete-guide-grid/
外部容器
dispaly
和 Flex 一樣,需要定義容器的顯示類型。
.container {
display: grid | inline-grid | subgrid;
}
grid-template-columns, grid-template-rows
看完這個屬性,對於 CSS Grid 就會有基礎的了解。
Grid 和 flex 最大不同之處,透過 grid template 來定義版型的結構,分別由 column 及 row 定義出直排與橫列的格線,內容再依隔線作安排。
圖片來源:https://css-tricks.com/snippets/css/complete-guide-grid/
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
- track-size: 可使用彈性的長度、百分比或分數 (分數的部分需使用 fr 單位)
- line-name: 可自行命名的名稱
圖片:自己畫的
.wrap {
display: grid;
grid-template-columns: 200px 50px auto 50px 200px;
grid-template-rows: 25% 100px auto;
height: 100vh;
width: 940px;
margin: 0 auto;
}
粉紅色的部分就是 grid-template-columns,黃色部份則是 grid-template-rows,隔線排版就能靠上面一張圖了解!grid-template-columns 定義水平方向的空間,grid-template-rows 定義垂直方向的空間,且可以使用大部分的單位數值。
.wrap {
grid-template-columns: repeat(2, 1fr 2fr) 100px;
/* grid-template-columns: repeat({次數}, {格線...} | {格線...}) | {格線...}; */
}
這個地方在介紹兩個新東西,一個是 fr 這個單位,這個單位能夠將可用的 剩餘空間 做比例分割,以上面的 1fr 2fr 為例,空間將被分割成 1/3、2/3 兩個大小。
另一個是 repeat,可以重複隔線。
grid-template-areas
透過 area 定義區塊在 template 上的位置,概念就是在畫面上登記屬於該元素的空間,此部分要內外元素一起看。
- 內元素 grid-area:定義空間的名稱
- 外元素 grid-template-areas:定義空間的位置,是透過幾組字串的組合,組合方式可以參考下圖及程式碼。
假設我們需要繪製如上的空間配置,上方出現 5 * 3 那麼會透過 grid-area 來命名小空間的名稱,再透過 grid-template-areas 來表示整體空間的配置,配置的方式是透過字串的方式組合。
.wrap {
display: grid;
grid-template-columns: 200px 50px auto 50px 200px;
grid-template-rows: 25% 100px auto;
grid-template-areas:
"header header header header header"
"side main main main main"
"side footer footer footer footer";
height: 100vh;
width: 940px;
margin: 0 auto;
}
.item-a {
grid-area: header;
background-color: purple;
}
.item-b {
grid-area: main;
background-color: orange;
}
.item-c {
grid-area: side;
background-color: green;
}
.item-d {
grid-area: footer;
background-color: gray;
}
注意:
- 空間不能分離且是唯一的,錯誤範例:
"side main side"
grid-auto-columns, grid-auto-rows
簡單版的 Grid,如果版型較為簡單,可以直接使用 grid-auto-{ cols or rows}。如果是簡易的 960 12欄 grid 設定如下即可。
.row {
display: grid;
grid-auto-columns: 60px;
grid-auto-flow: column;
grid-gap: 20px;
width: 940px;
min-height: 100vh;
margin: 0 auto;
}
grid-auto-flow
Grid 的排列方式,以上面 12 欄排列 grid 來說,如果沒有設定 column,就會變成垂直排列。
.row {
grid-auto-flow: row | column | row dense | column dense
}
grid-gap, grid-column-gap, grid-row-gap
格線的間隔包含垂直及水平,可參考如下。
grid-column-gap: { grid-column-gap };
grid-row-gap: { grid-row-gap };
grid-gap: { grid-row-gap } { grid-column-gap };
justify-items, justify-content, align-content
與 flex 的使用方法一樣,先跳過之後再補充
內部容器
grid-column-start, grid-column-end, grid-row-start, grid-row-end
物件所佔的空間位置,Column 及 Row 所到的起始點及終點
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
<line>
- 用數字表示 物件 所在的線,可參考上一段的 template- span
<number>
- 物件所佔用的欄位數 - span
<name>
- 物件所在的 grid 名稱 - auto - 自動的啦
.item {
grid-column-start: 2; /* 物件起始線 */
grid-column-end: span 4; /* 終點線 = 物件所佔的空間數 */
grid-row-start: 3; /* 物件起始線 */
grid-row-end: auto; /* 不設定終點線 */
background-color: red;
z-index: 999; /* 欄位重疊可用 z-index 設定前後順序 */
}
grid-column, grid-row
上面那段的縮寫,使用斜線 (/) 隔開屬性。
.item {
grid-column: 2 / span 4;
}
grid-area
<name>
: 使用命名的方式,透過grid-template-areas
來套用<row-start>
/<column-start>
/<row-end>
/<column-end>
: 指定 grid 線數或 grid 名稱來定位
.item-a {
grid-area: 2 / 2 / 4/ 4;
}
justify-self, align-self
內容器的定位模式,與 flex 使用方式一樣。
Grid 目前想到的運用方面有:
- 滿版的排版,適合拿來做平面設計風格的排版
- 輕量的 grid system,或許下次 Bootstrap 就改用 Display grid 在排版了 ~_~。