理解 CSS Grid 的 grid-row 與 grid-column

分享:

CSS 的 Grid 是很有趣的東西,延續之前的基本設定,這篇來講一下 grid-row 與  grid-column。

首先準備一下 html 如下:

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

接著設定好 display: gird,然後我再把版面切成 3 個欄位:

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

本來切完後可以利用 grir-area 去分配空間,這邊我們來講一下 grid-row 與  grid-column 該如何應用,當我們把 grid layout 分割完後,可以用一張圖表示,因為我們把版面分成三欄,所以可以看成用四條線分割,各自給一個編號 1~4,而列(row)因為沒有指定數目,所以會依據我們給定的區塊延伸,這邊一樣用編號去代表一直長下去的列數。

 

接著設定 .one 的 grid-row 與  grid-column,我把他設定成這樣:

.one {
  grid-column: 1 / 3;
  grid-row: 1;
}

這個意思就是我在分割的 grid 裡,grid-column 設定本區快要佔 column (也就是藍色線條)的第 1 條到第 3 條的空間,也就是兩格,而 grid-row 則是佔了 row(紅色線)第 1 條往下一格的空間,這個寫法可以等同於 1 / 2。

在用第二個區塊來看另一個區塊的設定,我寫成:

.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

這代表這個區塊佔了 column 的第 2 到第 4 條線之間,row 的第 1 條到第 3 條之間,可以看到就算原本的列數沒有到那麼多,還是可以拉到那個區塊的位置。

多寫幾個區塊:

.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

可以看到以下的結果,可以去對應一下設定的所佔的空間。

 

參考:
CSS格線佈局

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。