【心得】你今天种菜了吗? 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-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;}