前言

昨天看了落落長的一大串~看得目睛花花
怎麼感覺他沒有一開始的grid-template-areas簡潔可愛呀(｡>﹏<)

切莫太早下定論!開始整理版面囉~

延續昨天的棋盤任務

版面整理 part-1：

grid-column: 開始 /結束

grid-row: 開始 /結束

整理前：

.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: 1/2;
  grid-column:1/2;
}
.black2{ 
  grid-row: 1/2;
  grid-column:3/4;
}
.black3{
  grid-row: 2/3;
  grid-column:2/3;
}
.black4{ 
  grid-row: 3/4;
  grid-column:1/2;
}
.black5{ 
  grid-row: 3/4;
  grid-column:3/4;
}

太好了!!目前成功少了10列 (✪ω✪)

這種感覺就像是直接指定位置給區塊
萬一哪天有10幾格、20幾格、30幾格...的時候就可以直接指定區塊的位置了

但他還可以再少一點喔!

版面整理 part-2：

grid-area: row-star/column-star/row-end/column-end

這邊就要記好欄列優先次序囉~

.black1{ grid-area: 1/1/2/2;}
.black2{ grid-area: 1/3/2/4;}
.black3{ grid-area: 2/2/3/3;}
.black4{ grid-area: 3/1/4/2;}
.black5{ grid-area: 3/3/4/4;}

哇喔一口氣剩下5列了!!
瞬間變的乾淨又整潔，真是居家好幫手阿~

這種寫法的優勢在於它可以讓區塊之間交疊
以更改black1的範圍為例，他可以跟第2、3區塊交疊

/* 更改區 */
.black1{ 
  background-color: #faa8;
  grid-row: 1/3;
  grid-column:1/4;
}

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

落漆!!! 不小心忘記填某個值會怎樣

以.black3 第三區塊為例，

1. 忘記寫"結束"位置

.black3{
  grid-row-start:2;
      /*忘記寫 grid-row-end:3; */
  grid-column-start:2;
      /*忘記寫 grid-column-end:3; */
}

.black3{
  grid-row: 2;    /*原本是2/3*/
  grid-column:2;  /*原本是2/3*/
}

.black3{ grid-area: 2/2;} 
             /*原本是2/2/3/3;*/

如果少寫了結束位置
grid會自動根據開始線條的下一格為結束線條

2. 忘記寫"開始"位置

grid會自動根據結束線條的上一格為開始線條

.black3{
      /*忘記寫 grid-row-start:2;*/
  grid-row-end:3; 
      /*忘記寫 grid-column-start:2;*/
  grid-column-end:3;
}

以下這兩種寫法網頁直接讀取為開始位置

.black3{
  grid-row: 3;    /*原本是2/3*/
  grid-column:3;  /*原本是2/3*/
}

.black3{ grid-area: 3/3;} 
             /*原本是2/2/3/3;*/

我相信如果發生這種事情應該會被前輩或其他夥伴拿磚頭起來...嗷!

To be continue...

下篇來學習如何設定寬高不同的格線~