iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

30天小老闆系列(1)--線上排班小工具系列 第 19

DAY19 搞樣式--CSS Gird 怎麼用(上)?

前言

上一篇提到了格線佈局的概念,簡單的用圖片來呈現,並沒有提到程式碼的部分,今天就讓我們來開始研究看看程式碼的部分要如何撰寫囉!

來用程式碼畫個格線吧!

今天我們要嘗試著用程式碼寫出這張圖片的格線佈局,來看看要怎麼做吧!
https://ithelp.ithome.com.tw/upload/images/20210920/20136833veWCjeGCF4.jpg

首先我們必須有一個外容器,也就是 container

<div class="container"></div>

接著我們必須要讓他的顯示類型變成Grid,所以在 css 部分必須要下 display

.container{
  display : grid; 
}

然後我們要畫線囉!

先來畫橫線,就是columns的部分,拆成五個20%等距的欄位

.container{
  grid-template-columns: 20% 20% 20% 20% 20%;
}

再來畫直線,就是rows的部分,拆成四個25%等距的行列

.container{
  grid-template-rows: 25% 25% 25% 25%;
}

像這樣就可以完成畫線的部分囉!可以看到container已經被我們切成5乘4的表格了
為了方便檢視,所以我放了20個 box 進去填滿並用 border 讓大家可以看到格線,如下圖:
https://ithelp.ithome.com.tw/upload/images/20210920/20136833pRTY8ceoJC.jpg

容器畫完格線了要怎麼放元件進去呢?

一樣用前一篇的圖片來做示範,我們先看到圖片中的內元件:
https://ithelp.ithome.com.tw/upload/images/20210920/20136833GHngmOgM01.jpg

元件的寬度是從 columns-1 開始,到 columns-4 結束。
高度從 row-1 開始,到 row-2 結束。

在程式碼中要如何撰寫呢?
我們需要對於元件的部分撰寫 CSS,來幫元件設定他畫線的起點跟終點
grid-colums-start 決定欄位的起點是第幾條線, grid-column-end 決定欄位的終點是第幾條線

.boxA {
  grid-column-start: 1;
  grid-column-end: 4;
}

grid-row-start 決定行的起點是第幾條線,grid-row-end 決定行的終點是第幾條線

.boxA{
  grid-row-start: 1;
  grid-row-end: 2;
}

https://ithelp.ithome.com.tw/upload/images/20210920/20136833wU1nlKrzJt.jpg

像這樣就可以看到我們已經畫好元件A囉!
可喜可賀,今天完成了我們第一組格線佈局!


上一篇
DAY18 搞樣式--CSS Gird 是什麼?
下一篇
DAY20 搞樣式--CSS Gird 怎麼用(下)?
系列文
30天小老闆系列(1)--線上排班小工具30

尚未有邦友留言

立即登入留言