iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

前進切版之路! CSS微體驗系列 第 12

【心得】你今天種菜了嗎? grid之路-grid的使用(4)

前言

前面用棋盤方格為例,練習了如何用
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-columnsgrid-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的線條命名~


上一篇
【心得】你今天種菜了嗎? grid之路-grid的使用(3)
下一篇
【心得】你今天種菜了嗎? grid之路-grid的使用(5)
系列文
前進切版之路! CSS微體驗30

尚未有邦友留言

立即登入留言