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

前言

昨天看了落落长的一大串~看得目睛花花
怎麽感觉他没有一开始的grid-template-areas简洁可爱呀(｡>﹏<)

切莫太早下定论!开始整理版面罗~

延续昨天的棋盘任务

版面整理 part-1：

grid-column: 开始 /结束

grid-row: 开始 /结束

整理前：

.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: 1/2;
  grid-column:1/2;
}
.black2{ 
  grid-row: 1/2;
  grid-column:3/4;
}
.black3{
  grid-row: 2/3;
  grid-column:2/3;
}
.black4{ 
  grid-row: 3/4;
  grid-column:1/2;
}
.black5{ 
  grid-row: 3/4;
  grid-column:3/4;
}

太好了!!目前成功少了10列 (✪ω✪)

这种感觉就像是直接指定位置给区块
万一哪天有10几格、20几格、30几格...的时候就可以直接指定区块的位置了

但他还可以再少一点喔!

版面整理 part-2：

grid-area: row-star/column-star/row-end/column-end

这边就要记好栏列优先次序罗~

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

哇喔一口气剩下5列了!!
瞬间变的乾净又整洁，真是居家好帮手阿~

这种写法的优势在於它可以让区块之间交叠
以更改black1的范围为例，他可以跟第2、3区块交叠

/* 更改区 */
.black1{ 
  background-color: #faa8;
  grid-row: 1/3;
  grid-column:1/4;
}

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

落漆!!! 不小心忘记填某个值会怎样

以.black3 第三区块为例，

1. 忘记写"结束"位置

.black3{
  grid-row-start:2;
      /*忘记写 grid-row-end:3; */
  grid-column-start:2;
      /*忘记写 grid-column-end:3; */
}

.black3{
  grid-row: 2;    /*原本是2/3*/
  grid-column:2;  /*原本是2/3*/
}

.black3{ grid-area: 2/2;} 
             /*原本是2/2/3/3;*/

如果少写了结束位置
grid会自动根据开始线条的下一格为结束线条

2. 忘记写"开始"位置

grid会自动根据结束线条的上一格为开始线条

.black3{
      /*忘记写 grid-row-start:2;*/
  grid-row-end:3; 
      /*忘记写 grid-column-start:2;*/
  grid-column-end:3;
}

以下这两种写法网页直接读取为开始位置

.black3{
  grid-row: 3;    /*原本是2/3*/
  grid-column:3;  /*原本是2/3*/
}

.black3{ grid-area: 3/3;} 
             /*原本是2/2/3/3;*/

我相信如果发生这种事情应该会被前辈或其他夥伴拿砖头起来...嗷!

To be continue...

下篇来学习如何设定宽高不同的格线~