---
# System prepended metadata

title: CSS Grids
tags: ['HTML, CSS']

---

# CSS Grids 
---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`



* Flexbox處理的是一個層面的排列
* Grids處理的是兩個層面的排列

![](https://i.imgur.com/Tr4sjHf.png)

------------------

## grid-template-columns : 設定欄位的大小

可以發現整欄左下角的物件也是呈現40%，因為他遵守上面設定的條件 40 30 30

![](https://i.imgur.com/aGuQJgd.png)

![](https://i.imgur.com/3lj19RW.png)


使用一個fr會讓一個物件整個橫排兩個fr就兩個以此類推，repeat的部分(前方是重複幾次，後面是大小)
![](https://i.imgur.com/24Emhkp.png)

結果如下圖
![](https://i.imgur.com/xLANx2Z.png)


在reapeat內部後面也可以這樣使用讓物件呈現 1fr 2fr大小這樣的順序走下去
![](https://i.imgur.com/3qIiezr.png)

![](https://i.imgur.com/4MyRT0y.png)



-----


## grid-column-gap: 1em 很明顯的他會是物件之間欄跟欄之間的空隙大小

![](https://i.imgur.com/lAwGsrd.png)

grid-row-gap: 1em 行跟行之間的空隙大小

![](https://i.imgur.com/IancKtl.png)



也可以使用縮寫: grid-gap: 1em

行跟欄之間都會出現空隙1em


-------------


## grid-auto-rows:  可以設定所有物件的高度


設定後
![](https://i.imgur.com/F9jDP0U.png)

設定前
![](https://i.imgur.com/hceCfO8.png)


![](https://i.imgur.com/QCHgkvq.png)

這個指令可以讓如果文字內容太多了會超出物件的話，使用他就可以讓它隨著文字內容縮放
並且只有特定的那一行會做改變而已
![](https://i.imgur.com/eqco5UH.png)

------

## justify-items

justify-items:stretch(預設也是這個)
![](https://i.imgur.com/zbcsdRA.png)


justify-items: start 讓物件靠左

![](https://i.imgur.com/FsgjERX.png)

justify-items: center

![](https://i.imgur.com/jpZAtU3.png)

justify-items: end

![](https://i.imgur.com/XQxbZKm.png)


-----------

## align-items

align-items:stretch(預設)

![](https://i.imgur.com/Y8zHDHZ.png)


align-items:start (上角對齊)

![](https://i.imgur.com/IRsa4df.png)

align-items:center(對齊中間)

![](https://i.imgur.com/amOp44B.png)

align-items:end(向下對齊)


![](https://i.imgur.com/vh28YPM.png)


align-self 可以個別物件設定不同的定位

![](https://i.imgur.com/bn4Rnyq.png)

![](https://i.imgur.com/cPkEpe3.png)


---------------

## grid-column/grid-row

這是物件的原始狀態:

![](https://i.imgur.com/xWqw1f6.png)

當它使用 grid-column: 1/3的時候表示box1會吃到灰色格子數字1號吃到3號，並且把之後的格子往後擠
![](https://i.imgur.com/5BDtFpI.png)

灰色的點點是給column參考的，黑色的點點是給row參考的

![](https://i.imgur.com/LWQvHwX.png)

![](https://i.imgur.com/PwsA50N.png)

也可以使用gird-row:1/3，它就會往下吃

![](https://i.imgur.com/wmzhhdv.png)


這邊設定起始點是2到位置4，所以box3呈現成這樣

![](https://i.imgur.com/rx0ZQG4.png)
![](https://i.imgur.com/cuKZXgg.png)


box4表示了可以讓物件重疊
![](https://i.imgur.com/xECjPAx.png)
![](https://i.imgur.com/q27t6nt.png)
