前言

前面用棋盤方格為例，練習了如何用
grid-template-areas、
grid-column grid-row、
grid-area
來把區域填入格子當中

但這些格子都是等寬等高的情況

恩~可以讓格子不同寬高嗎?

行的!!

gird還能設定格子要怎麼畫呢~

畫格子

像這個樣子的照片牆

  grid-template-areas: 
    "black1 black1 black2 black3"
    "black1 black1 black4 black5";
    
  /*加入間距*/
  grid-row-gap: 1px;
  grid-column-gap: 1px;

之前我讓第一區塊占了兩份，2~5格則占了一份來配置
格線的部分就讓他自動，沒有多做設定

在父層設置 grid-template-columns、grid-template-rows

grid-template-columns：第一格寬度 第二格寬度 第三格寬度...
grid-template-rows：第一格高度 第二格高度 第三格高度...

加入格線之後變成這樣

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

 grid-template-columns: 50% 25% 25%;
 grid-template-rows: 50% 50%;

?用repeat來重複設定相同寬/高的格子

如果格子數量少，每一格單獨寫不難更改
但如果今天格子多，變更寬高就會花不少時間

那麼重複的地方就可以使用：

repeat(次數,單位)

套用在例子上就會是這個樣子

  grid-template-columns: 50% repeat(2,25%);
  grid-template-rows: repeat(2,50% );

?fr 分配剩餘空間

有時候腦袋暈暈，連1+1都可以等於4的時候
就很適合用fr來幫忙自動分配剩餘的空間

在這個例子中就是扣掉50%的空間之後，剩下的的空間分配成兩份
如果沒有需要扣掉的空間則會等分~

  grid-template-columns: 50% repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);

?縮寫 grid-template

grid-template: row-1 row-2 ... / col-1 col-2... ;

在這個例子中就可以一次設定欄列
但必須要為各個區塊設定起始線條

.wrap{
  width: 600px;
  height: 300px;
  border:3px solid #f00;
  
  display: grid;
  grid-template: repeat(2, 1fr) / 2fr repeat(2, 1fr);
}
.black{  background-color: #000; color:#fff;}

.black1{  
    grid-area: black1;
    grid-row: 1/3;
    grid-column: 1/2;
}

.black2{  
    grid-area: black2;
    grid-row: 1;
    grid-column: 2/3 ;
}

.black3{  
    grid-area: black3;
    grid-row: 1;
    grid-column: 3/4 ;
}

.black4{
    grid-area: black4;
    grid-row: 2;
    grid-column: 2/3 ;
}

.black5{  
    grid-area: black5;
    grid-row: 2;
    grid-column: 3/4 ;
}

呀~這樣看起來似乎更長了呢!
再簡約一點可以這樣整理
跟grid-template-areas結合在一起
就不需要在子層設定起始線條

.wrap{
  width: 600px;
  height: 300px;
  border:3px solid #f00;
  
  display: grid;
  
  grid-template:
    "black1 black2  black3"50% 
    "black1 black4  black5"50%
      /50%   25%   25%;
}
.black{ background-color: #000; color:#fff;}

.black1{ grid-area: black1;}
.black2{ grid-area: black2;}
.black3{ grid-area: black3;}
.black4{ grid-area: black4;}
.black5{ grid-area: black5;}

結語

有趣的 gird 使用方法非常的彈性多元!
看懂了他的預作模式之後，下次遇到版面之後又多一種切法了呢

明天介紹grid的線條命名~