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

前言

最近练习切版，遇到这种排版时就开始算尺寸
想着要怎麽切才好(思考)

flex、float、inline-block 都可以
但怎麽可以忘记grid呢!!
它好适合做有秩序又规整的格式呀~

废话不多说
来看看怎麽使用grid吧~
学会了之後，以後遇到照片墙又多一种方法了

学习路径

grid 是什麽?

字义上就是「格子」，可以让人画格子的概念来分配物件位置

举例来说：想要排出一个黑白棋盘的样子

↑像这样

首先先写出HTML的结构

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

很简单的用一个父层包住了5个 div，分别对应棋盘中的五个黑色的区域
接下来就是好玩的CSS部份了!

步骤一: `display: grid;`

先在父层的位置(.wrap)写上display: grid;

步骤二: `grid-area`

到子层各个div帮它们取区域名称

.black{  background-color: #000;}

.black1{  grid-area: black1;}
.black2{  grid-area: black2;}
.black3{  grid-area: black3;}
.black4{  grid-area: black4;}
.black5{  grid-area: black5;}

步骤三: `grid-template-areas`

接下来拿出空白纸笔想一下，需要几栏几列

以例子来说，我需要"等宽等高"的3栏3列
回到父层!加入 grid-template-areas
每一列都用" "包住
每一栏都用空白作为间隔
遇到要跳过不填的就用. 表示本格空白~

所以范例写出来会变这样子~

.wrap{
    width: 600px;
    height: 600px;

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

可能会想说「哇~点点占的字元太少，没有对齐好难看呀」
没关系，一个点点不够就来两个，两个不够再来一打!(?)
我们可以用很多"..."来让版面变好看

  .wrap{
    width: 600px;
    height: 600px;
    
    display:grid;
    grid-template-areas: 
    "black1 ...... black2"
    "...... black3 ......"
    "black4 ...... black5";
}

这样是不是变的很工整呢~
(点点的数量不会造成影响)

什麽?被嫌code行数太多?
如果要缩短code行数也是可以啦~
像这样

.wrap{
    width: 600px;
    height: 600px;
    
    display:grid;
    grid-template-areas: "black1 ...... black2" "...... black3 ......" "black4 ...... black5";
}

有好好的用" "把列包住就可以了

所以像是最前面的照片墙
我可以像这样子分配

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

充满期待地把写上去之後...按下F5!!!!

然後
我就可以获得!!
一片黑糊糊.....(((ﾟдﾟ)))!?

别担心!
因为grid预设是栏列之间没有间格~

设定 grid 栏列间距

grid-row-gap
grid-column-gap

如果需要区块间有间距，可以在父层加上grid-row-gap grid-column-gap

  grid-template-areas: 
    "black1 black1 black2 black3"
    "black1 black1 black4 black5";
    
  /*加入间距*/
  grid-row-gap: 1px;
  grid-column-gap: 1px;

注意他是把区块推开产生间隙，所以是没有色彩的喔
会跑出照片墙下层的区块色彩