簡單入門 Grid 屬性/用法/使用情境

CodePen 練習示範

簡單入門

在示範中的最初始樣子，有個一個class 為 columns 的 div。
沒有CSS時的樣子

三欄排列

首先當使用了 display: grid 會發現好像沒什麼改變
要讓grid作三欄排列，還要加上grid-template-columns
撰寫方式:

.columns{
    display: grid;
    grid-template-columns: 33% 33% 33%
}

讓他每一欄為33%均分。
當然也可以變成grid-template-columns: 50% 25% 25%
感覺起來Grid比起Flex好像可以更精準、更簡單的控制排版。
但接下來就遇到我們第一個問題!
如果我把上面三欄扣掉一欄呢?

Grid好像沒有辦法像Flex一樣，幫我們自動修改讓兩個都變成 50%。
其實是可以的!

自適應排版

.columns{
    display: grid;
    grid-auto-flow: column
}

換成加上grid-auto-flow: column，你會發現不管增加欄位或是減少欄位，Grid都會當我們自動均分。
如果想要讓欄位間都有固定的間隔，可以加上gap: ?em/px/...

.columns{
  display: grid;
  grid-auto-flow: column;
  gap: 2em;
}

可以將columns 換成row 看看不同的地方。

響應式排版怎麼做?

現在的情境是，在平板以下時變成單欄，大於平板時變回均分欄位(三欄)

.columns{
  display: grid;
  grid-auto-flow: row;
  gap: 2em;
}
@media (min-width: 767px){
  .columns{
    grid-auto-flow: column;
}

練習到這裡，熟習flexbox的人應該就可以感覺到不同了! 其他的地方不說，光是看row和column的角度就不一樣。
在flexbox中，如果你要多個東西一起排在同一行(水平排放)是flex-direction: row；如果需要多個東西垂直排放是flex-direction: column，這樣的作法可以理解flexbox的思考角度是，從父層看子層，父層要讓內部子層的東西排放的方向。
而在grid中，如果你要多個東西一起排在同一行(水平排放)是grid-auto-flow: column；如果需要多個東西垂直排放是grid-auto-flow: row，這樣的作法可以理解grid的思考角度是，整個畫面感，如果要呈現多個東西放水平那他的畫面感就會是一欄一欄，而多個東西要垂直放，他的畫面感就會是很多一行一行。
這是我自己的理解方法啦! 有寫人會說grid這樣比較直觀，只要想你的畫面要怎麼呈現就好，但是因為我用了flexbox很久，所以兩個對我來說都算可以理解。

網格系統思考方式

<div class="container" style="border: solid 2px black; width: 300px; height: 300px">
    <div class="box" style="background-color: blue"></div>
</div>

Grid 可以把它想成一個網格系統
你可以先在外層設定他的網格系統，例如:

//這個網格系統是5*5的均分格式
.container {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

這樣的網格也有一個比較簡寫的寫法就是repeat(數量,值)

//這個網格系統是5*5的均分格式
.container {
  display: grid;
  grid-template-columns: repeat(5,20%);
  grid-template-rows: repeat(5,20%);
}

還有另一種寫法fr，fr的運用就像式幾分之幾一樣，假如說今天要分兩個欄為，一個欄位是3分之1，另一個就是3分之2。就可以這樣寫

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(5,20%);
}

另外，網格系統不限於只用%，也可以使用em,px等等，並且可以混用喔!
例如grid-template-columns: 100px 3em 40%

要如果讓內層的東西置中?

//讓東西放在grid第三欄第三行
.box{
    grid-column: 3;
    grid-row: 3;

如果我要讓內層的東西一次佔三個欄位並水平垂直置中呢?

.box{
  grid-column: 2/5;
  grid-row: 3/4;
}

其實詳細的寫法應該為:

.box{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4
}

也還有更加簡化的寫法:
grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end

.box{
    grid-area: 3/2/4/5
}

應該不難理解!

order

除了明確寫出要讓內層出現在第幾格結束於第幾格，也可以使用order。
每一個內層物件其實有預設order: 0，order有點像是z-index一樣，可以為正或負數。
我們在剛剛的container內再加一個<div class="box2" style="background-color: pink"></div>

//預設都是 order: 0
.box{
    order: 0
}

如果像讓兩個順序對調呢?

.box2{
    order: -1
}

為甚麼是-1呢? 因為所有元素的order預設都是0，要依照他本來的排序和預設的0來決定，要修改排序時需要的值。

下面這個小遊戲幫助我很多!
練習Grid小遊戲