前言

最近練習切版，遇到這種排版時就開始算尺寸
想著要怎麼切才好(思考)

flex、float、inline-block 都可以
但怎麼可以忘記grid呢!!
它好適合做有秩序又規整的格式呀~

廢話不多說
來看看怎麼使用grid吧~
學會了之後，以後遇到照片牆又多一種方法了

學習路徑

1. Grid Garden (種菜遊戲)

2. CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線

3. Understanding CSS Grid: Grid Template Areas

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;

注意他是把區塊推開產生間隙，所以是沒有色彩的喔
會跑出照片牆下層的區塊色彩

To be continue...

下一篇來學習進階版寫法!