前言

昨天介紹了用grid-template-areas 來填格子

  grid-template-areas: 
    "black1 ...... black2"
    "...... black3 ......"
    "black4 ...... black5";

看起來整潔又非常好理解~

今天來用另一個更有挑戰性的寫法!
它自由度更高、玩起來更好玩 d(d＇∀＇)

再請出昨天的棋盤來練習吧!

<div class="wrap">
  <div class="black black1"></div>
  <div class="black black2"></div>
  <div class="black black3"></div>
  <div class="black black4"></div>
  <div class="black black5"></div>
</div>

步驟一：一樣在父層設定 display:grid

步驟二：在子層設定

grid-row-start

grid-row-end

grid-column-start

grid-column-end

在執行這個步驟之前，先理解一下它的運作模式

grid-column-start:第幾條直線開始
grid-column-end:第幾條直線結束
在語言方向是由左到右的情況下
直線的順序由左至右起算，線與線之間區域的就是區塊位置
數值的部分填的是「整數」，也可以填「負數」
負數的算法就是從左至右

grid-row-start：第幾條橫線開始
grid-row-end：第幾條橫線結束
直線的順序由上至下起算，線與線之間區域的就是區塊位置
數值的部分填的是「整數」，也可以填「負數」
負數的算法就是從下至上

了解之後就可以開工啦!

.black1{ 
  grid-row-start:1;
  grid-row-end:2;
  grid-column-start:1;
  grid-column-end:2;
}
.black2{ 
  grid-row-start:1;
  grid-row-end:2;
  grid-column-start:3;
  grid-column-end:4;
}
.black3{
  grid-row-start:2;
  grid-row-end:3;
  grid-column-start:2;
  grid-column-end:3; 
}
.black4{ 
  grid-row``-start:3;
  grid-row-end:4;
  grid-column-start:1;
  grid-column-end:2;
}
.black5{ 
  grid-row-start:3;
  grid-row-end:4;
  grid-column-start:3;
  grid-column-end:4;
}

這樣子就構成棋盤的樣子~

另外在線條開始與線條結束的部分並沒有規定一定要從小到寫大
所以反著寫是可以的

/*以左上第一區塊為例*/
.black1{ 
  grid-row-start:2;
  grid-row-end:1;
  grid-column-start:2;
  grid-column-end:1;
}

在這個例子中
如果用負填數寫則要記得要全部統一都用負數
否則從 +1 到 -4 可是差了5個間格喔~
(用負數的那個區塊會造成整體跑版)

.black1{ 
  grid-row-start:-3;
  grid-row-end:-4;
  grid-column-start:-3;
  grid-column-end:-4;
}
.black2{ 
  grid-row-start:-4;
  grid-row-end:-3;
  grid-column-start:-2;
  grid-column-end:-1;
}
.black3{
  grid-row-start:-3;
  grid-row-end:-2;
  grid-column-start:-2;
  grid-column-end:-3; 
}
.black4{ 
  grid-row-start:-1;
  grid-row-end:-2;
  grid-column-start:-3;
  grid-column-end:-4;
}
.black5{ 
  grid-row-start:-2;
  grid-row-end:-1;
  grid-column-start:-2;
  grid-column-end:-1;
}

To be continue...

看完之後是不是感覺
「...這真是...好長的一串阿...」

雖然這樣子方便理解很多，但是看了就是不夠精簡( ˘･з･)
這個部分也有縮寫可以讓版面變的簡潔喔!

明天繼續學習~