【心得】你今天种菜了吗? grid之路-grid的使用(5)

前言

既然可以使用grid-area为每个区域命名，并填入grid-template-areas中，那可不可以帮线条命名呢?

答案是可以的~
这次一样用照片墙来做范例

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

为线条命名

命名的规则

grid-template-columns:
[线条名称1] 格宽A 格宽B...
[线条名称2] 格宽C...
[线条名称3] 格宽D 格宽E...
[线条名称4] 

这样讲有点抽象(´･_･`)
画图来对应看一下应该会好理解很多

注意：

• 命名时要避开 span 这个单字
• 一条线可以拥有多个名称，用空格分开即可
• 名称可以重复使用

那麽继续来拚墙~

步骤一：

先在父层的位置设定

display: grid;
grid-template-columns:
   [big-start] 2fr
   [big-end small-start] 1fr 1fr
   [small-end];
 
grid-template-rows:
 [row-start] 1fr 1fr
 [row-end];

步骤二：

到子层的区块进行设定

 .black1{
  grid-column: big-start / big-end;
  grid-row: row-start / row-end;
}

到这里会发现我只需要设定black1，
其它就会按照语言方向乖乖排好了耶!

但我也可以随意地改动位置

.black1{
  grid-column: big-start / big-end;
  grid-row: row-start / row-end;
}
.black2{
  grid-column: small-start;
}
.black3{
  grid-column: small-start;
  grid-row:2;
}
.black5{
  grid-column: 3;
  grid-row:1;
}

发现了嘛!线条命名可以跟线条顺序一起使用
使用方法跟以线条顺序作为起始点的是一样的

那麽线条重复命名要怎麽使用呢?
以棋盘图为例

<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-template-columns:
    [col-line] 1fr
    [col-line] 1fr
    [col-line] 1fr
    [col-line];
 grid-template-rows:
    [row-line] 1fr
    [row-line] 1fr
    [row-line] 1fr
    [row-line];

对里面的方块设定

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

在线条名称的後面输入「该名称的第几条」就可以罗~~

grid好好玩!明天来介绍在grid的中使用 auto-fill、mixmax 这个神器 :D