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


Posted by hoyi-23 on 2021-09-30

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%);
}

還有另一種寫法frfr的運用就像式幾分之幾一樣,假如說今天要分兩個欄為,一個欄位是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: 0order有點像是z-index一樣,可以為正或負數。
我們在剛剛的container內再加一個<div class="box2" style="background-color: pink"></div>

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


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

.box2{
    order: -1
}

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


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


#grid







Related Posts

系統架構

系統架構

Python Flask + Keras 建置圖片分類 API

Python Flask + Keras 建置圖片分類 API

[0] 寫在一開始,關於這個系列文

[0] 寫在一開始,關於這個系列文


Comments