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

前言

昨天介绍了用grid-template-areas 来填格子

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

看起来整洁又非常好理解~

今天来用另一个更有挑战性的写法!
它自由度更高、玩起来更好玩 d(d＇∀＇)

再请出昨天的棋盘来练习吧!

<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-row-start

grid-row-end

grid-column-start

grid-column-end

在执行这个步骤之前，先理解一下它的运作模式

grid-column-start:第几条直线开始
grid-column-end:第几条直线结束
在语言方向是由左到右的情况下
直线的顺序由左至右起算，线与线之间区域的就是区块位置
数值的部分填的是「整数」，也可以填「负数」
负数的算法就是从左至右

grid-row-start：第几条横线开始
grid-row-end：第几条横线结束
直线的顺序由上至下起算，线与线之间区域的就是区块位置
数值的部分填的是「整数」，也可以填「负数」
负数的算法就是从下至上

了解之後就可以开工啦!

.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-start:2;
  grid-row-end:1;
  grid-column-start:2;
  grid-column-end:1;
}

在这个例子中
如果用负填数写则要记得要全部统一都用负数
否则从 +1 到 -4 可是差了5个间格喔~
(用负数的那个区块会造成整体跑版)

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

To be continue...

看完之後是不是感觉
「...这真是...好长的一串阿...」

虽然这样子方便理解很多，但是看了就是不够精简( ˘･з･)
这个部分也有缩写可以让版面变的简洁喔!

明天继续学习~